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.
This commit is contained in:
Martin Brennan 2025-06-05 12:40:00 +10:00 committed by GitHub
parent b3d78a6a10
commit 1fb358a9d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 7 additions and 3 deletions

View File

@ -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>

View File

@ -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>

View File

@ -78,8 +78,6 @@
}
.rag-uploader {
width: 500px;
&__search-input {
display: flex;
align-items: center;

View File

@ -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 {
@include viewport.from(lg) {
max-width: 80%;
}
position: relative;
#control-rag_uploads .rag-uploader {