UX: Better handling of long category names and button bar in composer (#10542)

app/assets/stylesheets/common/base/compose.scss

@@ -191,7 +191,6 @@
   .user-selector,
   .title-and-category {
     display: flex;
-    flex-wrap: wrap;
     width: 100%;
     align-items: center;
     margin-bottom: 5px;
@@ -219,7 +218,8 @@
 
   .category-input {
     display: flex;
-    flex: 1 0 35%;
+    flex: 1 0 40%;
+    max-width: 40%;
     margin: 0 0 5px 10px;
     @media screen and (max-width: 955px) {
       flex: 1 0 100%;
@@ -228,15 +228,42 @@
     .category-chooser {
       display: flex;
       flex: 1 0 auto;
+      max-width: 100%;
       width: auto;
+      .select-kit-header {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      // below needed for text-overflow: ellipsis;
+      .selected-name {
+        max-width: 100%;
+        overflow: hidden;
+        .name {
+          max-width: 100%;
+          overflow: hidden;
+          display: flex;
+          .badge-wrapper {
+            overflow: hidden;
+          }
+          // This prevents the first category from being too-truncated at the expense of a long subcategory
+          .badge-wrapper:first-of-type:not(:last-of-type) {
+            flex: 1 0 auto;
+            max-width: 50%;
+          }
+        }
+      }
     }
   }
 
   .with-tags {
+    .title-and-category {
+      flex-wrap: wrap;
+    }
     .category-input {
-      flex-basis: 25%;
       margin-left: 0;
-      margin-right: 5px;
+      min-width: 0; // allows flex to shrink
+      flex-wrap: wrap;
+      max-width: 50%;
       @media screen and (max-width: 920px) {
         flex-basis: 100%;
         margin-right: 0;
@@ -256,20 +283,17 @@
   #reply-title {
     margin: 0 0 5px 0;
     flex-basis: 50%;
+    width: unset;
     &:focus {
       box-shadow: none;
     }
   }
 
   .mini-tag-chooser {
-    flex: 1 1 25%;
+    width: 49%;
-    margin: 0 0 5px 0;
+    margin: 0 0 5px auto;
     background: var(--secondary);
     z-index: z("composer", "dropdown");
-    @media all and (max-width: 900px) {
-      margin: 0;
-      flex: 1 1 100%;
-    }
   }
 
   .popup-tip {
@@ -509,3 +533,11 @@ body:not(.ios-safari-composer-hacks) {
     padding-bottom: var(--composer-ipad-padding);
   }
 }
+
+.show-preview {
+  @media screen and (max-width: 850px) {
+    .d-editor-button-bar {
+      font-size: $font-down-1;
+    }
+  }
+}

app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss

@@ -21,9 +21,10 @@
           box-shadow: none;
           cursor: pointer;
           max-width: 250px;
+          overflow: hidden;
 
           .name {
-            white-space: nowrap;
+            @include ellipsis;
           }
         }
       }

app/assets/stylesheets/desktop/compose.scss

@@ -24,10 +24,14 @@
   .select-kit.is-expanded {
     z-index: z("composer", "dropdown") + 1;
   }
-}
 
-.category-input {
+  .d-editor-textarea-wrapper {
-  margin-left: 10px;
+    overflow: hidden;
+  }
+  .d-editor-button-bar {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
 }
 
 .edit-title {
@@ -45,9 +49,6 @@
   .with-tags {
     .d-editor-preview-wrapper {
       margin-top: -77px;
-      @media screen and (max-width: 900px) {
-        margin-top: -105px;
-      }
     }
   }
 }

app/assets/stylesheets/mobile/compose.scss

@@ -184,25 +184,12 @@
   }
 
   .with-tags {
-    .category-input {
-      flex: 1 0 0px;
-      margin: 0;
-      width: 45%;
-      margin-bottom: 5px;
-    }
-
     .mini-tag-chooser {
-      width: 50%;
-      flex: 1 0 0px;
-      margin-left: 5px;
-      margin-bottom: 5px;
       z-index: z("base");
     }
 
     .selected-name {
-      overflow: hidden;
       .name {
-        @include ellipsis;
         font-size: $font-down-1;
         .badge-wrapper {
           font-size: $font-0;
@@ -211,8 +198,10 @@
     }
   }
 
-  .title-input,
+  .user-selector {
-  .category-input,
+    flex-wrap: wrap;
+  }
+
   .users-input,
   .add-warning {
     width: 100%;