UX: adjust sidebar modal styles, consolidate css (#22444)

This gets all the related CSS into the common file, and removes desktop and mobile variants.

This also makes some general styling adjustments.

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.hbs

@@ -36,16 +36,16 @@
                 class="sidebar-categories-form__category-label"
                 for={{concat "sidebar-categories-form__input--" category.id}}
               >
+                <div class="sidebar-categories-form__category-wrapper">
                   <div class="sidebar-categories-form__category-badge">
                     {{category-badge category}}
                   </div>
-
                   {{#unless category.parentCategory}}
                     <div class="sidebar-categories-form__category-description">
                       {{dir-span category.description_excerpt htmlSafe="true"}}
                     </div>
                   {{/unless}}
-              </label>
+                </div>
 
                 <Input
                   id={{concat "sidebar-categories-form__input--" category.id}}
@@ -60,6 +60,7 @@
                   )}}
                   {{on "click" (action "toggleCategory" category.id)}}
                 />
+              </label>
             </div>
           {{/each}}
         </div>

app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/categories-modal.scss

@@ -5,20 +5,7 @@
     border: 1px solid var(--primary-low);
     border-left: 4px solid;
     margin-bottom: 1em;
-    padding: 0.75em;
+    padding: 0;
-  }
-
-  .sidebar-categories-form__input {
-    margin-left: auto;
-    margin-right: 0;
-    align-self: baseline;
-  }
-
-  .sidebar-categories-form__category-row {
-    display: flex;
-    flex-direction: row;
-    margin-right: 1em;
-    padding: 0.5em 0;
   }
 
   .sidebar-categories-form__category-row[data-category-level="0"]:not(
@@ -44,12 +31,24 @@
 
   .sidebar-categories-form__category-label {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
-    margin-right: 0.5em;
+    padding: 0.75em 1em;
+    margin: 0;
     flex-grow: 1;
+    input[type="checkbox"] {
+      margin-right: 0;
+    }
+  }
+
+  .sidebar-categories-form__category-wrapper {
+    min-width: 0;
   }
 
   .sidebar-categories-form__category-badge {
+    .badge-wrapper {
+      width: 100%;
+    }
+
     .badge-category {
       white-space: normal;
       word-wrap: break-word;
@@ -58,11 +57,15 @@
     .category-name {
       color: var(--primary);
       font-size: var(--font-up-1);
+      @include ellipsis;
     }
   }
 
   .sidebar-categories-form__category-description {
     color: var(--primary-high);
     font-size: var(--font-down-1);
+    margin: 0.25em 0;
+    // avoids long words (like urls) from breaking the layou
+    word-break: break-word;
   }
 }

app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss

@@ -1,17 +1,28 @@
-.sidebar__edit-navigation-menu__modal {
+.modal.sidebar__edit-navigation-menu__modal {
+  @include breakpoint("tablet", min-width) {
+    .modal-inner-container {
+      width: 100%;
+    }
+  }
+  .modal-header {
+    border: none;
+  }
   .modal-body {
-    min-height: 25vh;
+    border-top: 1px solid var(--primary-low);
+    margin-top: 1em;
+    height: 40dvh;
   }
 }
 
 .sidebar__edit-navigation-menu__filter {
   display: flex;
-  flex-direction: row;
+  gap: 0.5em;
-  padding: 1em 1em 0 1em;
+  padding: 0 0.66em 0;
+  @include breakpoint("tablet", min-width) {
+    padding: 0 1em 0;
+  }
 
   .sidebar__edit-navigation-menu__filter-dropdown {
-    margin-left: 0.5em;
-
     .select-kit-header {
       background: var(--secondary);
       color: var(--primary);
@@ -36,6 +47,22 @@
     margin-right: auto;
     width: 100%;
     position: relative;
+    flex: 1 1 70%;
+    input {
+      margin: 0;
+    }
+  }
+
+  .sidebar__edit-navigation-menu__filter-dropdown-wrapper {
+    flex: 1 1 30%;
+    display: flex;
+
+    .select-kit {
+      width: 100%;
+      summary {
+        height: 100%;
+      }
+    }
   }
 
   .sidebar__edit-navigation-menu__filter-input-icon {
@@ -62,10 +89,11 @@
 .sidebar__edit-navigation-menu__footer {
   display: flex;
   width: 100%;
+  margin-top: 0.25em;
 
   .btn.sidebar__edit-navigation-menu__reset-defaults-button {
     margin-left: auto;
-    margin-right: 0em;
+    margin-right: 0;
 
     .d-icon {
       font-size: var(--font-down-1);
@@ -80,7 +108,8 @@
 }
 
 .sidebar__edit-navigation-menu__deselect-wrapper {
-  margin: 0;
+  margin: 0 1em 0 0;
+  line-height: var(--line-height-medium);
 
   .btn-flat.sidebar__edit-navigation-menu__deselect-button {
     margin-left: auto;

app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss

@@ -1,20 +1,34 @@
 .sidebar-tags-form {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  gap: 0 0.5em;
+  margin: 0;
+  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
+  &__no-tags {
+    grid-column-start: 1;
+    grid-column-end: -1;
+  }
 
   .sidebar-tags-form__tag {
-    flex-basis: 30%;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    padding: 0.5em 0.25em;
 
     .sidebar-tags-form__tag-label {
       margin-bottom: 0;
+      min-width: 0;
+      padding: 0.33em 0;
+      @include breakpoint(tablet) {
+        // extra tappable space
+        padding: 0.5em 0;
+      }
 
       p {
+        overflow: hidden;
         margin: 0;
       }
+      &-name {
+        // avoid long tags breaking the layou
+        word-break: break-all;
+      }
     }
 
     .sidebar-tags-form__input {
@@ -24,5 +38,6 @@
 
   .sidebar-tags-form__tag-label-count {
     color: var(--primary-medium);
+    margin-left: 0.33em;
   }
 }

app/assets/stylesheets/desktop/components/_index.scss

@@ -1,5 +1,3 @@
-@import "sidebar/edit-navigation-menu/categories-modal";
-@import "sidebar/edit-navigation-menu/tags-modal";
 @import "user-card";
 @import "user-info";
 @import "user-stream-item";

app/assets/stylesheets/desktop/components/sidebar/edit-navigation-menu/categories-modal.scss

@@ -1,5 +0,0 @@
-.sidebar-categories-form-modal {
-  .modal-inner-container {
-    min-width: var(--modal-max-width);
-  }
-}

app/assets/stylesheets/desktop/components/sidebar/edit-navigation-menu/tags-modal.scss

@@ -1,5 +0,0 @@
-.sidebar__edit-navigation-menu__tags-modal {
-  .modal-inner-container {
-    min-width: var(--modal-max-width);
-  }
-}

app/assets/stylesheets/mobile/components/_index.scss

@@ -1,5 +1,3 @@
-@import "sidebar/edit-navigation-menu/modal";
-@import "sidebar/edit-navigation-menu/tags-modal";
 @import "topic-footer-mobile-dropdown";
 @import "user-card";
 @import "user-stream-item";

app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/modal.scss

@@ -1,15 +0,0 @@
-.sidebar__edit-navigation-menu {
-  .modal-inner-container {
-    width: 35em;
-  }
-}
-
-.sidebar__edit-navigation-menu__filter {
-  flex-direction: column;
-  padding: 0.667em;
-
-  .sidebar__edit-navigation-menu__filter-dropdown {
-    margin-left: 0;
-    width: 100%;
-  }
-}

app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/tags-modal.scss

@@ -1,11 +0,0 @@
-.sidebar__edit-navigation-menu__tags-modal {
-  .modal-inner-container {
-    width: 35em;
-  }
-}
-
-.sidebar-tags-form {
-  .sidebar-tags-form__tag {
-    flex-basis: 100%;
-  }
-}