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

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, {
@@ -822,6 +822,35 @@ export default Component.extend(
                 offset: [0, verticalOffset]
               }
             },
+            {
+              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",

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;

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;

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;
         }
       }
     }

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;

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 {

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;
-    }
   }
 }

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 {

app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss

@@ -1,11 +1,19 @@
-.topic-footer-mobile-dropdown {
+.select-kit {
-  .select-kit-row {
+  &.combo-box {
-    .svg-icon-title {
+    &.topic-footer-mobile-dropdown {
-      margin-right: 0.5em;
+      .select-kit-row {
-    }
+        .svg-icon-title {
-    &.bookmarked {
+          margin-right: 0.5em;
-      .d-icon {
+        }
-        color: $tertiary;
+        &.bookmarked {
+          .d-icon {
+            color: $tertiary;
+          }
+        }
+      }
+
+      .select-kit-collection {
+        max-height: 100%;
       }
     }
   }

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,