From cf6a6ed9b84517ee59832c90f91bb6df7f864f05 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 13 Sep 2023 09:53:19 -0700
Subject: [PATCH] FIX: AI Helper UX bugs (#223)

---
 .../after-d-editor/ai-helper-context-menu.js  |  2 +-
 .../modules/ai-helper/common/ai-helper.scss   | 30 ++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js
index 282da4aa..17512449 100644
--- a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js
+++ b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.js
@@ -121,7 +121,7 @@ export default class AiHelperContextMenu extends Component {
         )
       : "";
 
-    if (this.selectedText.length === 0) {
+    if (this.selectedText?.length === 0) {
       this.closeContextMenu();
       return;
     }
diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
index b4f25386..1c8d1f91 100644
--- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
+++ b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
@@ -206,11 +206,18 @@
 
 // Suggest Titles Related
 .suggest-titles-button {
-  position: absolute;
-  top: 1px;
-  right: 1px;
+  display: block;
+  align-self: baseline;
   background: var(--secondary);
-  border: none;
+  border: 1px solid var(--primary-medium);
+  border-left: none;
+}
+
+.title-input:has(.suggestion-button) {
+  // border on focus should be on top of suggestion button
+  input:focus {
+    z-index: 1;
+  }
 }
 
 .suggestion-button {
@@ -249,6 +256,21 @@
   position: relative;
 }
 
+// Prevent suggestion button from wrapping on smaller screens
+@media screen and (max-width: 768px) {
+  #reply-control {
+    .category-input:has(.suggestion-button) {
+      .category-chooser {
+        width: 10px;
+      }
+
+      + .mini-tag-chooser {
+        width: 10px;
+      }
+    }
+  }
+}
+
 .suggest-tags-button + .ai-suggestions-menu {
   top: 4.25rem;
 }