UX: improve layout of inline title editing buttons (#1000)

Author: awesomerobot

assets/javascripts/discourse/components/suggestion-menus/ai-category-suggester.gjs

@@ -115,7 +115,7 @@ export default class AiCategorySuggester extends Component {
         @icon={{this.triggerIcon}}
         @identifier="ai-category-suggester"
         @onClose={{this.onClose}}
-        @triggerClass="suggestion-button suggest-category-button {{if
+        @triggerClass="btn-transparent suggestion-button suggest-category-button {{if
           this.loading
           'is-loading'
         }}"

assets/javascripts/discourse/components/suggestion-menus/ai-tag-suggester.gjs

@@ -180,7 +180,7 @@ export default class AiTagSuggester extends Component {
         @icon={{this.triggerIcon}}
         @identifier="ai-tag-suggester"
         @onClose={{this.onClose}}
-        @triggerClass="suggestion-button suggest-tags-button {{if
+        @triggerClass="btn-transparent suggestion-button suggest-tags-button {{if
           this.loading
           'is-loading'
         }}"

assets/javascripts/discourse/components/suggestion-menus/ai-title-suggester.gjs

@@ -117,7 +117,7 @@ export default class AiTitleSuggester extends Component {
         @icon={{this.triggerIcon}}
         @identifier="ai-title-suggester"
         @onClose={{this.onClose}}
-        @triggerClass="suggestion-button suggest-titles-button {{if
+        @triggerClass="btn-transparent suggestion-button suggest-titles-button {{if
           this.loading
           'is-loading'
         }}"

assets/stylesheets/modules/ai-helper/common/ai-helper.scss

@@ -209,6 +209,30 @@
       border-bottom-right-radius: 0;
     }
   }
+
+  #edit-title {
+    padding-right: 2em;
+  }
+
+  .category-chooser {
+    .select-kit-header-wrapper {
+      padding-right: 1.5em;
+    }
+  }
+
+  .mini-tag-chooser {
+    .multi-select-header {
+      padding-right: 2em;
+    }
+  }
+
+  .select-kit.is-expanded {
+    // need to raise the z-index so the sibling input buttons don't cover the dropdown
+    z-index: z("dropdown") + 1;
+    + button {
+      z-index: z("dropdown") + 1;
+    }
+  }
 }
 
 .suggestion-button {
@@ -217,15 +241,23 @@
   }
 }
 
+.edit-title__wrapper,
+.edit-category__wrapper,
+.edit-tags__wrapper {
+  position: relative;
+}
+
 .suggest-titles-button,
 .suggest-tags-button,
 .suggest-category-button {
-  align-self: baseline;
-  border: 1px solid var(--primary-400);
-  border-left: none;
-  background: none;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  position: absolute;
+  right: 0;
+  top: 1px; // container border width
+  z-index: z("dropdown");
+
+  #reply-control & {
+    z-index: z("composer", "dropdown") + 1;
+  }
 }
 
 .ai-category-suggester-content,
@@ -319,6 +351,12 @@
       }
     }
   }
+
+  .showing-ai-suggestions {
+    #reply-title {
+      padding-right: 2em;
+    }
+  }
 }
 
 .suggest-tags-button + .ai-suggestions-menu {