FIX: tweaks of select-kit on mobile (#26401)

- uses footer-nav height and safe-area-inset-bottom as bottom padding
- body scroll lock select-kit only when inside a modal

app/assets/javascripts/select-kit/addon/components/select-kit.js

@@ -916,6 +916,26 @@ export default Component.extend(
         );
         const strategy = this._computePlacementStrategy();
 
+        let bottomOffset = 0;
+        if (this.capabilities.isIOS) {
+          bottomOffset +=
+            parseInt(
+              getComputedStyle(document.documentElement)
+                .getPropertyValue("--safe-area-inset-bottom")
+                .trim(),
+              10
+            ) || 0;
+        }
+        if (this.site.mobileView) {
+          bottomOffset +=
+            parseInt(
+              getComputedStyle(document.documentElement)
+                .getPropertyValue("--footer-nav-height")
+                .trim(),
+              10
+            ) || 0;
+        }
+
         this.popper = createPopper(anchor, popper, {
           eventsEnabled: false,
           strategy,
@@ -940,6 +960,7 @@ export default Component.extend(
                       ),
                       10
                     ) || 0,
+                  bottom: bottomOffset,
                 },
               },
             },

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js

@@ -1,3 +1,4 @@
+import { cached } from "@glimmer/tracking";
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import {
@@ -8,8 +9,18 @@ import {
 export default Component.extend({
   tagName: "",
 
+  @cached
+  get inModal() {
+    const element = this.selectKit.mainElement();
+    return element.closest(".d-modal");
+  },
+
   @action
   lock(element) {
+    if (!this.inModal) {
+      return;
+    }
+
     disableBodyScroll(element);
   },
 

app/assets/stylesheets/common/base/discourse.scss

@@ -10,6 +10,7 @@
   --d-input-bg-color--disabled: var(--primary-low);
   --d-input-text-color--disabled: var(--primary);
   --d-input-border--disabled: 1px solid var(--primary-low);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom);
 }
 
 // Animation Keyframes