From 40eea40d698fefa0c94384b2624337b90bc69c2b Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 29 Feb 2024 17:48:47 -0500
Subject: [PATCH] UX: clean up tag info styles, remove mobile stylesheet
 (#25973)

---
 .../discourse/app/components/tag-info.hbs     | 48 +++++++++--------
 .../stylesheets/common/base/tagging.scss      | 53 ++++++++-----------
 app/assets/stylesheets/mobile/_index.scss     |  1 -
 app/assets/stylesheets/mobile/tagging.scss    |  9 ----
 4 files changed, 47 insertions(+), 64 deletions(-)
 delete mode 100644 app/assets/stylesheets/mobile/tagging.scss

diff --git a/app/assets/javascripts/discourse/app/components/tag-info.hbs b/app/assets/javascripts/discourse/app/components/tag-info.hbs
index d7d944bd9de..148b1246600 100644
--- a/app/assets/javascripts/discourse/app/components/tag-info.hbs
+++ b/app/assets/javascripts/discourse/app/components/tag-info.hbs
@@ -49,23 +49,25 @@
             >{{d-icon "pencil-alt"}}</a>
           {{/if}}
         </div>
-        <div class="tag-description-wrapper">
-          <span>{{html-safe this.tagInfo.description}}</span>
-        </div>
+        {{#if this.tagInfo.description}}
+          <div class="tag-description-wrapper">
+            <span>{{html-safe this.tagInfo.description}}</span>
+          </div>
+        {{/if}}
       {{/if}}
     </div>
     <div class="tag-associations">
-      {{#if this.tagInfo.tag_group_names}}
+      {{~#if this.tagInfo.tag_group_names}}
         {{this.tagGroupsInfo}}
-      {{/if}}
-      {{#if this.tagInfo.categories}}
+      {{/if~}}
+      {{~#if this.tagInfo.categories}}
         {{this.categoriesInfo}}
         <br />
         {{#each this.tagInfo.categories as |category|}}
           {{category-link category}}
         {{/each}}
-      {{/if}}
-      {{#if this.nothingToShow}}
+      {{/if~}}
+      {{~#if this.nothingToShow}}
         {{#if this.tagInfo.category_restricted}}
           {{i18n "tagging.category_restricted"}}
         {{else}}
@@ -74,7 +76,7 @@
             {{html-safe (i18n "tagging.staff_info" basePath=(base-path))}}
           {{/if}}
         {{/if}}
-      {{/if}}
+      {{/if~}}
     </div>
     {{#if this.tagInfo.synonyms}}
       <div class="synonyms-list">
@@ -112,7 +114,7 @@
     {{#if this.editSynonymsMode}}
       <section class="add-synonyms field">
         <label for="add-synonyms">{{i18n "tagging.add_synonyms_label"}}</label>
-        <div>
+        <div class="add-synonyms__controls">
           <TagChooser
             @id="add-synonyms"
             @tags={{this.newSynonyms}}
@@ -123,22 +125,24 @@
             @unlimitedTagCount={{true}}
             @allowCreate={{true}}
           />
-          <DButton
-            @action={{action "addSynonyms"}}
-            @disabled={{this.addSynonymsDisabled}}
-            @icon="check"
-            class="ok"
-          />
+          {{#if this.newSynonyms}}
+            <DButton
+              @action={{action "addSynonyms"}}
+              @disabled={{this.addSynonymsDisabled}}
+              @icon="check"
+              class="ok"
+            />
+          {{/if}}
         </div>
       </section>
     {{/if}}
     {{#if this.canAdminTag}}
-      <section>
-        <PluginOutlet
-          @name="tag-custom-settings"
-          @outletArgs={{hash tag=this.tagInfo}}
-        />
-      </section>
+      <PluginOutlet
+        @name="tag-custom-settings"
+        @outletArgs={{hash tag=this.tagInfo}}
+        @connectorTagName="section"
+      />
+
       <div class="tag-actions">
         <DButton
           @action={{action "toggleEditControls"}}
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 6aa90d6eeda..1f99ade1733 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -317,31 +317,29 @@ header .discourse-tag {
 }
 
 section.tag-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
   margin: 1em 0;
   padding: 2em;
   border: 1px solid var(--primary-low);
 
-  .field {
-    margin: 0 0 0.5em;
-  }
-
-  .btn {
-    margin-right: 0.5em;
-  }
-
   .edit-tag-wrapper {
     display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 1em;
-    #edit-name {
+    flex-direction: column;
+
+    #edit-name,
+    #edit-description {
       width: 100%;
+      margin-bottom: 0.5em;
     }
+
     #edit-description {
       height: 120px;
-      flex: 10 1 auto;
     }
     .edit-controls {
-      width: 100%;
+      display: flex;
+      gap: 0.5em;
     }
   }
 
@@ -381,34 +379,25 @@ section.tag-info {
     }
   }
 
-  .tag-description-wrapper {
-    margin-bottom: 1em;
-  }
-
-  .tag-associations {
-    margin-bottom: 1em;
-  }
-
   .tag-actions {
-    margin-top: 2em;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+  }
+
+  .tag-associations:empty {
+    display: none;
   }
 
   .add-synonyms {
-    margin-top: 1em;
-    div {
-      display: flex;
-    }
-    .ok {
-      margin-left: 0.5em;
-      display: none;
-    }
-    .has-selection + .ok {
+    &__controls {
       display: flex;
+      gap: 0.5em;
     }
   }
 
   .tag-list {
-    margin: 0.5em 0 1em;
+    margin: 0.5em 0 0;
     padding: 0;
     border: none;
     a {
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index 9b718029462..b56158a9821 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -28,7 +28,6 @@
 @import "reviewables";
 @import "search";
 @import "sidebar";
-@import "tagging";
 @import "topic-list";
 @import "topic-post";
 @import "topic";
diff --git a/app/assets/stylesheets/mobile/tagging.scss b/app/assets/stylesheets/mobile/tagging.scss
deleted file mode 100644
index d18d3cf6529..00000000000
--- a/app/assets/stylesheets/mobile/tagging.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.edit-tag-wrapper {
-  flex-direction: column;
-  .edit-controls {
-    margin-bottom: 0.5em;
-  }
-}
-.tag-info .tag-actions {
-  display: flex;
-}