UX: attempts to have a better use of available space with sk (#9639)

UX: attempts to have a better use of available space with sk (#9639)

diff --git a/app/assets/javascripts/select-kit/components/select-kit.js b/app/assets/javascripts/select-kit/components/select-kit.js
index e5c9394..12a2583 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/components/select-kit.js
@@ -808,7 +808,7 @@ export default Component.extend(
           placementStrategy = inModal ? "fixed" : "absolute";
         }
 
-        const verticalOffset = this.multiSelect ? 0 : 2;
+        const verticalOffset = this.multiSelect ? 0 : 3;
 
         /* global Popper:true */
         this.popper = Popper.createPopper(anchor, popper, {
@@ -823,6 +823,35 @@ export default Component.extend(
               }
             },
             {
+              name: "applySmallScreenOffset",
+              enabled: window.innerWidth <= 450,
+              phase: "main",
+              fn({ state }) {
+                let { x } = state.elements.reference.getBoundingClientRect();
+                state.modifiersData.popperOffsets.x = -x + 10;
+              }
+            },
+            {
+              name: "applySmallScreenMaxWidth",
+              enabled: window.innerWidth <= 450,
+              phase: "beforeWrite",
+              fn({ state }) {
+                state.styles.popper.width = `${window.innerWidth - 20}px`;
+              }
+            },
+            {
+              name: "sameWidth",
+              enabled: window.innerWidth > 400,
+              phase: "beforeWrite",
+              requires: ["computeStyles"],
+              fn: ({ state }) => {
+                state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+              },
+              effect: ({ state }) => {
+                state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`;
+              }
+            },
+            {
               name: "positionWrapper",
               phase: "afterWrite",
               enabled: true,
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 2f84f85..8529cfd 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -39,10 +39,6 @@
         }
       }
 
-      .select-kit-body {
-        min-width: 300px;
-      }
-
       .select-kit-row {
         flex-direction: column;
         align-items: flex-start;
diff --git a/app/assets/stylesheets/common/select-kit/category-row.scss b/app/assets/stylesheets/common/select-kit/category-row.scss
index 0d90a61..2bbe33c 100644
--- a/app/assets/stylesheets/common/select-kit/category-row.scss
+++ b/app/assets/stylesheets/common/select-kit/category-row.scss
@@ -1,6 +1,6 @@
 .select-kit {
   .category-row {
-    max-width: 320px;
+    max-width: 345px;
     .category-status {
       display: flex;
       align-items: center;
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 13ac7f4..5221072 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -17,8 +17,6 @@
       border: 1px solid $primary-low;
       background-clip: padding-box;
       box-shadow: shadow("dropdown");
-      max-width: 300px;
-      width: 300px;
     }
 
     .select-kit-row {
@@ -89,6 +87,7 @@
           font-weight: normal;
           color: $primary-medium;
           white-space: normal;
+          min-width: 350px;
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index 65d9d29..83648c0 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -4,10 +4,6 @@
     background: $secondary;
     border-radius: 0;
 
-    .select-kit-body {
-      width: 100%;
-    }
-
     .select-kit-row {
       margin: 5px;
       min-height: 1px;
diff --git a/app/assets/stylesheets/common/select-kit/notifications-button.scss b/app/assets/stylesheets/common/select-kit/notifications-button.scss
index 03d7e8c..40ed042 100644
--- a/app/assets/stylesheets/common/select-kit/notifications-button.scss
+++ b/app/assets/stylesheets/common/select-kit/notifications-button.scss
@@ -3,11 +3,6 @@
     &.notifications-button {
       .select-kit-body {
         max-width: 400px;
-        width: 400px;
-
-        @media screen and (max-width: 767px) {
-          width: auto;
-        }
       }
 
       .select-kit-row {
diff --git a/app/assets/stylesheets/common/select-kit/pinned-button.scss b/app/assets/stylesheets/common/select-kit/pinned-button.scss
index e1b31d2..f080b8a 100644
--- a/app/assets/stylesheets/common/select-kit/pinned-button.scss
+++ b/app/assets/stylesheets/common/select-kit/pinned-button.scss
@@ -24,11 +24,5 @@
 
   .pinned-options {
     display: inline;
-
-    .select-kit-body {
-      min-width: unset;
-      max-width: unset;
-      width: 550px;
-    }
   }
 }
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 59a3d42..2f2c31b 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -1,6 +1,5 @@
 .select-kit {
   border: none;
-  min-width: 220px;
   box-sizing: border-box;
   display: inline-block;
   flex-direction: column;
@@ -22,12 +21,8 @@
     .select-kit-body {
       display: flex;
       flex-direction: column;
-      left: 0;
-      position: absolute;
-      top: 0;
       align-items: center;
       justify-content: center;
-      max-width: 450px;
     }
 
     .select-kit-collection {
@@ -133,7 +128,6 @@
     display: none;
     background: $secondary;
     box-sizing: border-box;
-    width: auto;
   }
 
   .select-kit-row {
diff --git a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
index 42a90c7..932ddf3 100644
--- a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
+++ b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
@@ -1,11 +1,19 @@
-.topic-footer-mobile-dropdown {
-  .select-kit-row {
-    .svg-icon-title {
-      margin-right: 0.5em;
-    }
-    &.bookmarked {
-      .d-icon {
-        color: $tertiary;
+.select-kit {
+  &.combo-box {
+    &.topic-footer-mobile-dropdown {
+      .select-kit-row {
+        .svg-icon-title {
+          margin-right: 0.5em;
+        }
+        &.bookmarked {
+          .d-icon {
+            color: $tertiary;
+          }
+        }
+      }
+
+      .select-kit-collection {
+        max-height: 100%;
       }
     }
   }
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 636fa06..902f421 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -81,9 +81,6 @@
 
   .category-input {
     margin-bottom: 5px;
-    .category-chooser {
-      width: 100% !important;
-    }
   }
 
   .submit-panel {
@@ -206,10 +203,6 @@
         }
       }
     }
-
-    .title-and-category .select-kit {
-      min-width: unset;
-    }
   }
 
   .title-input,

GitHub sha: bd0abddf

1 Like

This commit appears in #9639 which was merged by jjaffeux.

+              name: "applySmallScreenOffset",
+              enabled: window.innerWidth <= 450,
+              phase: "main",
+              fn({ state }) {
+                let { x } = state.elements.reference.getBoundingClientRect();
+                state.modifiersData.popperOffsets.x = -x + 10;
+              }

It looks like this causes the SK dropdowns in a fixed modal (when building a poll, for example) to be off-screen:

2 Likes

I already fixed it yesterday, theres a pr I will merge today: FIX: improves positioning of sk in mobile when inside a modal by jjaffeux · Pull Request #9657 · discourse/discourse · GitHub

Thanks for the report anyways.

2 Likes