From 1fb358a9d04eac9f058a88701f466f6669a864e3 Mon Sep 17 00:00:00 2001 From: Martin Brennan 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 { 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| > 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 {