FIX: improves positioning of sk in mobile when inside a modal (#9657)

FIX: improves positioning of sk in mobile when inside a modal (#9657)

diff --git a/app/assets/javascripts/select-kit/components/select-kit.js b/app/assets/javascripts/select-kit/components/select-kit.js
index 84f0fab..71cf24e 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/components/select-kit.js
@@ -782,8 +782,10 @@ export default Component.extend(
               enabled: window.innerWidth <= 450,
               phase: "main",
               fn({ state }) {
-                let { x } = state.elements.reference.getBoundingClientRect();
-                state.modifiersData.popperOffsets.x = -x + 10;
+                if (!inModal) {
+                  let { x } = state.elements.reference.getBoundingClientRect();
+                  state.modifiersData.popperOffsets.x = -x + 10;
+                }
               }
             },
             {
@@ -791,7 +793,18 @@ export default Component.extend(
               enabled: window.innerWidth <= 450,
               phase: "beforeWrite",
               fn({ state }) {
-                state.styles.popper.width = `${window.innerWidth - 20}px`;
+                if (inModal) {
+                  const innerModal = document.querySelector(
+                    "#discourse-modal div.modal-inner-container"
+                  );
+
+                  if (innerModal) {
+                    state.styles.popper.width = `${innerModal.clientWidth -
+                      20}px`;
+                  }
+                } else {
+                  state.styles.popper.width = `${window.innerWidth - 20}px`;
+                }
               }
             },
             {

GitHub sha: 87b1d435

1 Like

This commit appears in #9657 which was approved by eviltrout. It was merged by jjaffeux.