From 88b9f0bc566281b2e7f9d8ab03e36ea2fc83c24c Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 27 Mar 2024 17:26:24 +0100
Subject: [PATCH] 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
---
 .../select-kit/addon/components/select-kit.js | 21 +++++++++++++++++++
 .../select-kit/select-kit-collection.js       | 11 ++++++++++
 .../stylesheets/common/base/discourse.scss    |  1 +
 3 files changed, 33 insertions(+)

diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js
index b3a6b7d369e..42acb2ab4f9 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit.js
+++ b/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,
                 },
               },
             },
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js
index 71dbcfe8d17..be06ebf3b43 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js
+++ b/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);
   },
 
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 7d5a0e4af55..7626c981be9 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/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