fix(webui): improve mobile responsiveness

webui/src/components/thread/ThreadComposer.tsx

@@ -1544,10 +1544,10 @@ export function ThreadComposer({
     "w-full resize-none bg-transparent",
     isHero
       ? cn(
-          "min-h-[78px] px-5 text-[15px] leading-6",
+          "min-h-[78px] px-4 text-[15px] leading-6 sm:px-5",
           relaxedHeroInput ? "pb-2 pt-[27px]" : "pb-1.5 pt-4",
         )
-      : "min-h-[50px] px-4 pb-1.5 pt-3 text-[13.5px] leading-5",
+      : "min-h-[50px] px-3.5 pb-1.5 pt-3 text-[13.5px] leading-5 sm:px-4",
   );
 
   return (
@@ -1699,11 +1699,13 @@ export function ThreadComposer({
         ) : null}
         <div
           className={cn(
-            "flex items-center justify-between",
-            isHero ? cn("gap-1.5 px-4", showProjectPicker ? "pb-1.5" : "pb-3.5") : "gap-2 px-3 pb-2",
+            "flex flex-wrap items-center justify-between gap-y-2",
+            isHero
+              ? cn("gap-x-1.5 px-3 sm:px-4", showProjectPicker ? "pb-1.5" : "pb-3.5")
+              : "gap-x-2 px-2.5 pb-2 sm:px-3",
           )}
         >
-          <div className={cn("flex min-w-0 flex-1 items-center", isHero ? "gap-1.5" : "gap-2")}>
+          <div className={cn("flex min-w-0 flex-1 basis-[8rem] items-center", isHero ? "gap-1.5" : "gap-2")}>
             <input
               ref={fileInputRef}
               type="file"
@@ -1746,7 +1748,7 @@ export function ThreadComposer({
               />
             ) : null}
           </div>
-          <div className={cn("flex shrink-0 items-center", isHero ? "gap-1.5" : "gap-2")}>
+          <div className={cn("ml-auto flex min-w-0 shrink-0 items-center", isHero ? "gap-1.5" : "gap-2")}>
             {modelLabel && !voiceRecorder.isRecording ? (
               <ComposerModelBadge
                 label={modelLabel}
@@ -1768,6 +1770,7 @@ export function ThreadComposer({
                       disabled={voiceRecorder.buttonDisabled}
                       aria-label={voiceButtonLabel}
                       aria-keyshortcuts={VOICE_SHORTCUT_ARIA}
+                      title={voiceButtonTooltip}
                       onPointerDown={voiceRecorder.beginPress}
                       onPointerUp={voiceRecorder.endPress}
                       onPointerCancel={voiceRecorder.endPress}
@@ -2071,7 +2074,9 @@ function ComposerModelBadge({
         "shadow-[0_2px_8px_rgba(15,23,42,0.045)]",
         interactive && "cursor-pointer hover:bg-accent/55 hover:text-foreground",
         needsSetup && "border-amber-500/35 bg-amber-50/70 text-amber-900 dark:bg-amber-500/10 dark:text-amber-200",
-        isHero ? "h-8 max-w-[12.5rem] gap-1.5 px-2 text-[11.5px]" : "h-9 max-w-[12rem] gap-2 px-2.5 text-[12px]",
+        isHero
+          ? "h-8 max-w-[min(12.5rem,44vw)] gap-1.5 px-2 text-[11.5px]"
+          : "h-9 max-w-[min(12rem,44vw)] gap-2 px-2.5 text-[12px]",
       )}
     >
       <span
@@ -2252,7 +2257,7 @@ function CliAppMentionPalette({
                 onChoose(candidate);
               }}
               className={cn(
-                "flex h-10 w-full items-center gap-2.5 rounded-[13px] px-2.5 text-left transition-colors",
+                "flex min-h-10 w-full items-center gap-2.5 rounded-[13px] px-2.5 py-1.5 text-left transition-colors",
                 selected
                   ? "bg-foreground/[0.055] text-foreground"
                   : "text-foreground/90 hover:bg-foreground/[0.04]",
@@ -2260,7 +2265,7 @@ function CliAppMentionPalette({
             >
               <MentionCandidateLogo candidate={candidate} selected={selected} />
               <span className="flex min-w-0 flex-1 items-baseline gap-2">
-                <span className="shrink-0 text-[15px] font-medium tracking-normal text-foreground">
+                <span className="min-w-0 truncate text-[15px] font-medium tracking-normal text-foreground">
                   {displayName}
                 </span>
                 <span className="truncate text-[15px] font-normal tracking-normal text-muted-foreground/72">
@@ -2396,7 +2401,7 @@ function SlashCommandPalette({
               >
                 <Icon className="h-4 w-4" />
               </span>
-              <span className="flex min-w-0 flex-1 items-baseline gap-2">
+              <span className="flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-2">
                 <span className="min-w-0 truncate text-[13.5px] font-semibold tracking-normal text-foreground">
                   {title}
                 </span>
@@ -2404,7 +2409,7 @@ function SlashCommandPalette({
                   {command.detail || description}
                 </span>
               </span>
-              <span className="ml-2 flex shrink-0 items-center gap-1.5">
+              <span className="ml-2 flex max-w-[42%] shrink-0 items-center gap-1.5 sm:max-w-none">
                 {command.badge || command.recent ? (
                   <span className="hidden rounded-full bg-foreground/[0.055] px-2 py-1 text-[11px] font-medium text-muted-foreground sm:inline-flex">
                     {command.badge ?? t("thread.composer.slash.badges.recent")}
@@ -2486,7 +2491,7 @@ function AttachmentChip({
         ) : null}
       </div>
       <div className="flex min-w-0 flex-col text-[11.5px] leading-4">
-        <span className="truncate max-w-[14rem] font-medium" title={image.file.name}>
+        <span className="max-w-[min(14rem,calc(100vw-8rem))] truncate font-medium" title={image.file.name}>
           {image.file.name}
         </span>
         <span className="truncate text-muted-foreground">