From 19f530a8271ef4ecadbee41a4d4b49775588f5c0 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 4 Dec 2024 16:30:48 -0500
Subject: [PATCH] UX: refactor title editing CSS to improve layout (#30109)

---
 .../discourse/app/templates/topic.hbs         | 87 ++++++++++---------
 app/assets/stylesheets/common/base/topic.scss | 81 +++++++++++------
 app/assets/stylesheets/desktop/topic.scss     |  5 --
 3 files changed, 100 insertions(+), 73 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs
index 0aec2e75b5f..5b364af76d5 100644
--- a/app/assets/javascripts/discourse/app/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/topic.hbs
@@ -52,58 +52,61 @@
           <div class="edit-topic-title">
             <PrivateMessageGlyph @shouldShow={{this.model.isPrivateMessage}} />
 
-            <PluginOutlet
-              @name="edit-topic-title"
-              @outletArgs={{hash model=this.model buffered=this.buffered}}
-            >
-              <TextField
-                @id="edit-title"
-                @value={{this.buffered.title}}
-                @maxlength={{this.siteSettings.max_topic_title_length}}
-                @autofocus="true"
-              />
-            </PluginOutlet>
-
-            {{#if this.showCategoryChooser}}
+            <div class="edit-title__wrapper">
               <PluginOutlet
-                @name="edit-topic-category"
+                @name="edit-topic-title"
                 @outletArgs={{hash model=this.model buffered=this.buffered}}
               >
-                <CategoryChooser
-                  @value={{this.buffered.category_id}}
-                  @onChange={{action "topicCategoryChanged"}}
-                  class="small"
+                <TextField
+                  @id="edit-title"
+                  @value={{this.buffered.title}}
+                  @maxlength={{this.siteSettings.max_topic_title_length}}
+                  @autofocus="true"
                 />
               </PluginOutlet>
+            </div>
+
+            {{#if this.showCategoryChooser}}
+              <div class="edit-category__wrapper">
+                <PluginOutlet
+                  @name="edit-topic-category"
+                  @outletArgs={{hash model=this.model buffered=this.buffered}}
+                >
+                  <CategoryChooser
+                    @value={{this.buffered.category_id}}
+                    @onChange={{action "topicCategoryChanged"}}
+                    class="small"
+                  />
+                </PluginOutlet>
+              </div>
             {{/if}}
 
             {{#if this.canEditTags}}
-              <PluginOutlet
-                @name="edit-topic-tags"
-                @outletArgs={{hash model=this.model buffered=this.buffered}}
-              >
-                <MiniTagChooser
-                  @value={{this.buffered.tags}}
-                  @onChange={{action "topicTagsChanged"}}
-                  @options={{hash
-                    filterable=true
-                    categoryId=this.buffered.category_id
-                    minimum=this.minimumRequiredTags
-                    filterPlaceholder="tagging.choose_for_topic"
-                    useHeaderFilter=true
-                  }}
-                />
-              </PluginOutlet>
-
+              <div class="edit-tags__wrapper">
+                <PluginOutlet
+                  @name="edit-topic-tags"
+                  @outletArgs={{hash model=this.model buffered=this.buffered}}
+                >
+                  <MiniTagChooser
+                    @value={{this.buffered.tags}}
+                    @onChange={{action "topicTagsChanged"}}
+                    @options={{hash
+                      filterable=true
+                      categoryId=this.buffered.category_id
+                      minimum=this.minimumRequiredTags
+                      filterPlaceholder="tagging.choose_for_topic"
+                      useHeaderFilter=true
+                    }}
+                  />
+                </PluginOutlet>
+              </div>
             {{/if}}
 
-            <span>
-              <PluginOutlet
-                @name="edit-topic"
-                @connectorTagName="div"
-                @outletArgs={{hash model=this.model buffered=this.buffered}}
-              />
-            </span>
+            <PluginOutlet
+              @name="edit-topic"
+              @connectorTagName="div"
+              @outletArgs={{hash model=this.model buffered=this.buffered}}
+            />
 
             <div class="edit-controls">
               <DButton
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 2d37a859074..b06751d206e 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -249,9 +249,6 @@
 .title-wrapper {
   display: flex;
   flex-wrap: wrap;
-  button {
-    margin: 0 0.5em 0 0;
-  }
   .topic-statuses {
     line-height: 1.2;
     .d-icon {
@@ -268,7 +265,9 @@
   .title-wrapper {
     display: flex;
     flex-wrap: wrap;
-    width: 90%;
+    @media screen and (min-width: 925px) {
+      width: 90%; // topic title isn't full-width on wide screens
+    }
   }
   h1 {
     margin-bottom: 0;
@@ -282,36 +281,66 @@
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
+    gap: 0.5em;
+    width: 100%;
     max-width: calc(
       var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
         var(--topic-avatar-width)
     );
-    #edit-title {
-      flex: 1 1 100%;
-    }
-    .category-chooser,
-    .mini-tag-chooser {
-      flex: 1 1 35%;
-      margin: 0 0 9px 0;
-      @media all and (max-width: 500px) {
-        flex: 1 1 100%;
-      }
-    }
-    .mini-tag-chooser {
-      flex: 1 1 54%;
-      margin: 0 0 9px 0;
-      margin-left: 1%; // category at 40%, tag chooser at 58%
-      @media all and (max-width: 500px) {
-        margin-left: 0;
-      }
-    }
-    .edit-controls {
-      flex: 1 1 100%;
-    }
     .select-kit .category-row {
       max-width: unset;
     }
   }
+
+  .edit-title__wrapper {
+    flex: 1 1 100%;
+    #edit-title {
+      width: 100%;
+      margin: 0;
+    }
+  }
+
+  .edit-category__wrapper {
+    flex: 1 1 5%;
+    @include breakpoint(tablet) {
+      min-width: 0; // allows category name to shrink to fit narrow screens
+    }
+    .select-kit.combo-box.category-chooser {
+      width: 100%;
+    }
+  }
+
+  .edit-tags__wrapper {
+    flex: 1 1 33%;
+    @include breakpoint(tablet) {
+      flex: 1 1 100%; // force full row on narrow screens
+    }
+
+    .mini-tag-chooser {
+      width: 100%;
+    }
+    .select-kit-header--filter {
+      flex-wrap: nowrap; // forces the whole input to wrap if needed, rather than individual tags
+      min-width: 0;
+      @include breakpoint(tablet) {
+        flex-wrap: wrap; // individual tags will need to wrap on narrow screens
+      }
+      button {
+        min-width: 0;
+      }
+    }
+
+    .multi-select-filter {
+      flex-shrink: 0;
+      min-width: 2em; // always provide a minimal space for input
+    }
+  }
+
+  .edit-controls {
+    display: flex;
+    width: 100%;
+    gap: 0.5em;
+  }
 }
 
 .private-message-glyph {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 9dd4ea77319..cb8d6330536 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -18,11 +18,6 @@
   z-index: z("base");
   margin-bottom: 1em;
 
-  #edit-title,
-  .category-chooser,
-  .edit-controls {
-    width: 500px;
-  }
   h1 {
     font-size: var(--font-up-4);
     line-height: var(--line-height-medium);