fix: chat composer queue button and focus mode sizing (#616)

packages/ui/src/components/chat/ChatInput.tsx

@@ -2195,7 +2195,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
             }}
             className={cn(
                 footerIconButtonClass,
-                'absolute bottom-full left-1/2 -translate-x-1/2 mb-1',
+                'absolute z-20 bottom-full left-1/2 -translate-x-1/2 mb-1',
                 hasContent && currentSessionId
                     ? 'text-primary hover:text-primary'
                     : 'opacity-30'
@@ -2625,7 +2625,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                 : undefined}
                         />
                     )}
-                    <div className={cn("relative overflow-hidden", isDesktopExpanded && 'flex-1 min-h-0')}>
+                    <div className={cn("relative overflow-hidden", isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}>
                         {highlightedComposerContent && (
                             <div
                                 aria-hidden
@@ -2683,6 +2683,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                             autoCorrect={isMobile ? "on" : "off"}
                             autoCapitalize={isMobile ? "sentences" : "off"}
                             spellCheck={isMobile}
+                            fillContainer={isDesktopExpanded}
                             outerClassName={cn('focus-within:ring-0', isDesktopExpanded && 'flex-1 min-h-0')}
                             className={cn(
                                 'min-h-[52px] resize-none border-0 px-3 rounded-b-none appearance-none hover:border-transparent bg-transparent relative z-10',

packages/ui/src/components/ui/textarea.tsx

@@ -6,20 +6,22 @@ import { ScrollableOverlay } from "./ScrollableOverlay"
 type TextareaProps = React.ComponentProps<"textarea"> & {
   outerClassName?: string;
   scrollbarClassName?: string;
+  fillContainer?: boolean;
 };
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, outerClassName, scrollbarClassName, ...props }, ref) => {
+  ({ className, outerClassName, scrollbarClassName, fillContainer = false, ...props }, ref) => {
     return (
       <ScrollableOverlay
         as="textarea"
         ref={ref as React.Ref<HTMLTextAreaElement>}
         disableHorizontal
-        fillContainer={false}
+        fillContainer={fillContainer}
         outerClassName={cn("w-full rounded-lg focus-within:ring-1 focus-within:ring-primary/50", outerClassName)}
         scrollbarClassName={scrollbarClassName}
         className={cn(
-          "text-foreground border border-border/80 placeholder:text-muted-foreground appearance-none dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-lg bg-transparent px-3 py-2 typography-markdown outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
+          "text-foreground border border-border/80 placeholder:text-muted-foreground appearance-none dark:bg-input/30 flex min-h-16 w-full rounded-lg bg-transparent px-3 py-2 typography-markdown outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
+          fillContainer ? "[field-sizing:fixed]" : "field-sizing-content",
           "hover:border-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
           "focus:border-primary/70",
           className