style(ui): refactor message composer layout and styling

app/components/MessageComposer.vue

@@ -44,6 +44,7 @@ const removeFile = (idx: number) => {
 <template>
   <div class="message-composer mt-3">
     <form @submit.prevent="handleSubmit">
+
       <div v-if="files.length > 0" class="message-files mb-3">
         <div v-for="(file, idx) in files" :key="idx" class="message-file-chip">
           <BIIcon name="it-clip" size="xs" />
@@ -52,7 +53,7 @@ const removeFile = (idx: number) => {
         </div>
       </div>
 
-      <div class="composer-shell">
+      <div class="d-flex align-items-stretch gap-2">
         <input
             ref="fileInputRef"
             type="file"
@@ -64,7 +65,7 @@ const removeFile = (idx: number) => {
 
         <button
             type="button"
-          class="btn btn-outline-primary btn-icon composer-attach"
+            class="btn btn-outline-primary btn-square flex-shrink-0"
             title="Allega file"
             @click="fileInputRef?.click()"
             :disabled="isSubmitting || files.length >= 5"
@@ -74,21 +75,20 @@ const removeFile = (idx: number) => {
 
         <textarea
             v-model="message"
-          class="form-control composer-textarea"
+            class="form-control chat-textarea m-0"
             placeholder="Scrivi aggiornamento o domanda"
-          rows="2"
             :disabled="isSubmitting"
             @keydown="handleKeydown"
-        />
+        ></textarea>
 
         <button
             type="submit"
-          class="btn btn-primary composer-submit"
+            class="btn btn-primary btn-square flex-shrink-0"
             :disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
+            title="Invia"
         >
-          <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-          <BIIcon v-else name="it-arrow-right" size="sm" color="white" class="me-1" />
-          Invia
+          <span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+          <BIIcon v-else name="it-arrow-right" size="sm" color="white" />
         </button>
       </div>
 
@@ -126,54 +126,33 @@ const removeFile = (idx: number) => {
   max-width: 14rem;
 }
 
-.composer-shell {
-  align-items: flex-end;
-  background: #fff;
-  border: 1px solid #c5d0db;
-  border-radius: 4px;
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  padding: 0.75rem;
-}
-
-.composer-shell:focus-within {
-  border-color: #06c;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
-}
-
-.composer-attach {
-  flex-shrink: 0;
-}
-
-.composer-textarea {
-  border: 0;
-  box-shadow: none;
-  min-height: 4rem;
-  padding: 0;
-  resize: vertical;
-}
-
-.composer-submit {
-  min-width: 7rem;
-}
-
 .btn-close-sm {
   font-size: 0.55rem;
 }
 
-@media (max-width: 767.98px) {
-  .composer-shell {
-    grid-template-columns: auto 1fr;
-  }
+/* Stili specifici richiesti per la chat */
+.chat-textarea {
+  resize: none !important;
+  height: 48px;
+  min-height: 48px;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-radius: 6px;
+}
 
-  .composer-textarea {
-    grid-column: 1 / -1;
-  }
+.chat-textarea:focus {
+  border-color: #06c;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
+}
 
-  .composer-submit {
-    grid-column: 2;
-    justify-self: end;
-  }
+.btn-square {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
 }
 </style>