From 1fb358a9d04eac9f058a88701f466f6669a864e3 Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Thu, 5 Jun 2025 12:40:00 +1000
Subject: [PATCH] UX: Style tweaks for RAG uploader and form width (#1407)

This commit changes the RAG uploader form elements to
be @format="full" instead of doing a hardcoded 500px width,
which was causing a horizontal scrollbar in the tools form
on mobile.

Also, it moves the 80% max width for the tools form into the
new viewport CSS API, and only applies it on desktop, because
this was also causing width issues on mobile.
---
 .../javascripts/discourse/components/ai-persona-editor.gjs  | 1 +
 .../discourse/components/ai-tool-editor-form.gjs            | 1 +
 assets/stylesheets/modules/ai-bot/common/ai-persona.scss    | 2 --
 assets/stylesheets/modules/ai-bot/common/ai-tools.scss      | 6 +++++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-persona-editor.gjs b/assets/javascripts/discourse/components/ai-persona-editor.gjs
index caf9c403..6dcbf8bf 100644
--- a/assets/javascripts/discourse/components/ai-persona-editor.gjs
+++ b/assets/javascripts/discourse/components/ai-persona-editor.gjs
@@ -530,6 +530,7 @@ export default class PersonaEditor extends Component {
             <form.Field
               @name="rag_uploads"
               @title={{i18n "discourse_ai.rag.uploads.title"}}
+              @format="full"
               as |field|
             >
               <field.Custom>
diff --git a/assets/javascripts/discourse/components/ai-tool-editor-form.gjs b/assets/javascripts/discourse/components/ai-tool-editor-form.gjs
index fc81869b..60c7b8ef 100644
--- a/assets/javascripts/discourse/components/ai-tool-editor-form.gjs
+++ b/assets/javascripts/discourse/components/ai-tool-editor-form.gjs
@@ -359,6 +359,7 @@ export default class AiToolEditorForm extends Component {
           @name="rag_uploads"
           @title={{i18n "discourse_ai.rag.uploads.title"}}
           @tooltip={{this.ragUploadsDescription}}
+          @format="full"
           as |field|
         >
           <field.Custom>
diff --git a/assets/stylesheets/modules/ai-bot/common/ai-persona.scss b/assets/stylesheets/modules/ai-bot/common/ai-persona.scss
index a5fdfe5b..94d0a30b 100644
--- a/assets/stylesheets/modules/ai-bot/common/ai-persona.scss
+++ b/assets/stylesheets/modules/ai-bot/common/ai-persona.scss
@@ -78,8 +78,6 @@
 }
 
 .rag-uploader {
-  width: 500px;
-
   &__search-input {
     display: flex;
     align-items: center;
diff --git a/assets/stylesheets/modules/ai-bot/common/ai-tools.scss b/assets/stylesheets/modules/ai-bot/common/ai-tools.scss
index 539cbd55..acbe5d8c 100644
--- a/assets/stylesheets/modules/ai-bot/common/ai-tools.scss
+++ b/assets/stylesheets/modules/ai-bot/common/ai-tools.scss
@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .ai-tool-parameter {
   padding: 1.5em;
   border: 1px solid var(--primary-low-mid);
@@ -27,7 +29,9 @@
 }
 
 .ai-tool-editor {
-  max-width: 80%;
+  @include viewport.from(lg) {
+    max-width: 80%;
+  }
   position: relative;
 
   #control-rag_uploads .rag-uploader {