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.

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>

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>

assets/stylesheets/modules/ai-bot/common/ai-persona.scss

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

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