From 5892e9e66c8fcede96e4f7f4053aad0877c759a2 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 8 May 2025 17:09:12 -0400
Subject: [PATCH] UX: stick new question button to top of mobile sidebar
 (#1329)

---
 .../ai-bot-sidebar-new-conversation.gjs       | 14 ++++++++------
 .../modules/ai-bot-conversations/common.scss  | 19 ++++++++++++++-----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs b/assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs
index 777ea34a..6f213192 100644
--- a/assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs
+++ b/assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs
@@ -22,12 +22,14 @@ export default class AiBotSidebarNewConversation extends Component {
 
   <template>
     {{#if this.shouldRender}}
-      <DButton
-        @label="discourse_ai.ai_bot.conversations.new"
-        @icon="plus"
-        @action={{this.routeTo}}
-        class="ai-new-question-button btn-default"
-      />
+      <div class="ai-new-question-button__wrapper">
+        <DButton
+          @label="discourse_ai.ai_bot.conversations.new"
+          @icon="plus"
+          @action={{this.routeTo}}
+          class="ai-new-question-button btn-default"
+        />
+      </div>
     {{/if}}
   </template>
 }
diff --git a/assets/stylesheets/modules/ai-bot-conversations/common.scss b/assets/stylesheets/modules/ai-bot-conversations/common.scss
index 4556abd6..43b36dd5 100644
--- a/assets/stylesheets/modules/ai-bot-conversations/common.scss
+++ b/assets/stylesheets/modules/ai-bot-conversations/common.scss
@@ -7,7 +7,20 @@
 
 body.has-ai-conversations-sidebar {
   .ai-new-question-button {
-    margin: 1.8em 1rem 0;
+    width: 100%;
+
+    &__wrapper {
+      background: var(--secondary);
+      margin: 1.8em 1em 0;
+
+      .mobile-view & {
+        padding: 1em;
+        position: sticky;
+        top: 0;
+        margin: -0.5em 0 0; // avoid shift when sticking
+        z-index: 1;
+      }
+    }
   }
 
   .sidebar-toggle-all-sections {
@@ -16,10 +29,6 @@ body.has-ai-conversations-sidebar {
 
   .sidebar-wrapper,
   .hamburger-dropdown-wrapper {
-    .ai-conversations-panel {
-      padding-top: 1em;
-    }
-
     // ai related sidebar content
     [data-section-name="ai-conversations-history"] {
       .sidebar-section-header-wrapper {