🥅 fix: Keep Mobile Composer Actions In Bounds (#15825)

Author: danny-avila

client/src/components/Chat/Input/ChatForm.tsx

@@ -745,6 +745,11 @@ const ChatForm = memo(function ChatForm({
                       onFocus={handleTextareaFocus}
                       onBlur={handleTextareaBlur}
                       aria-label={localize('com_ui_message_input')}
+                      aria-describedby={
+                        codeWorkspace.state === 'choose' || codeWorkspace.state === 'missing'
+                          ? `code-workspace-hint-${index}`
+                          : undefined
+                      }
                       onClick={handleFocusOrClick}
                       style={{ height: 44, overflowY: 'auto' }}
                       className={cn(
@@ -763,13 +768,22 @@ const ChatForm = memo(function ChatForm({
                   </div>
                 </div>
               )}
+              {(codeWorkspace.state === 'choose' || codeWorkspace.state === 'missing') && (
+                <p
+                  id={`code-workspace-hint-${index}`}
+                  role="status"
+                  className="px-5 pb-2 text-sm text-text-secondary"
+                >
+                  {localize('com_error_code_workspace_required')}
+                </p>
+              )}
               <div
                 className={cn(
-                  '@container items-between flex gap-2 pb-2',
+                  '@container flex flex-wrap items-center gap-2 px-2 pb-2',
                   isRTL ? 'flex-row-reverse' : 'flex-row',
                 )}
               >
-                <div className={`${isRTL ? 'mr-2' : 'ml-2'}`}>
+                <div className="shrink-0">
                   <AttachFileChat
                     conversation={conversation}
                     disableInputs={disableInputs}
@@ -808,7 +822,7 @@ const ChatForm = memo(function ChatForm({
                 {index === 0 && conversationId != null && (
                   <PendingToolApprovalButton conversationId={conversationId} />
                 )}
-                <div className="mx-auto flex" />
+                <div className="grow" />
                 <TokenUsage index={index} conversation={conversation} isSubmitting={isSubmitting} />
                 {SpeechToText && (
                   <AudioRecorder
@@ -821,7 +835,7 @@ const ChatForm = memo(function ChatForm({
                 {steering.duringRunActive &&
                   steering.canControlGeneration &&
                   (textValue?.trim() ?? '') !== '' && (
-                    <div className={`${isRTL ? 'ml-2' : 'mr-2'}`}>
+                    <div className="shrink-0">
                       <InterruptSteerButton
                         steering={steering}
                         getText={() => methods.getValues('text')}
@@ -830,7 +844,7 @@ const ChatForm = memo(function ChatForm({
                       />
                     </div>
                   )}
-                <div className={`${isRTL ? 'ml-2' : 'mr-2'}`}>
+                <div className={cn('shrink-0', isRTL ? 'mr-auto' : 'ml-auto')}>
                   {isSubmitting &&
                   (showStopButton || steering.duringRunActive) &&
                   !answerMode.composerAnswers

client/src/components/Chat/Input/CodeApprovalMenu.tsx

@@ -80,15 +80,17 @@ export default function CodeApprovalMenu({
             )}`}
             className={cn(
               composerControlClasses(),
-              'px-2.5 md:px-theme-normal',
+              'min-w-0 max-w-full px-2.5 md:px-theme-normal',
               isOpen && 'bg-surface-hover',
               disabled && 'cursor-not-allowed opacity-50',
             )}
           />
         }
       >
         <SelectedIcon className="size-4 shrink-0 text-text-secondary" aria-hidden="true" />
-        <span className="max-w-[12rem] truncate">{localize(modeOptions[selected].label)}</span>
+        <span className="min-w-0 max-w-[12rem] truncate">
+          {localize(modeOptions[selected].label)}
+        </span>
         <ChevronDown
           className={cn(
             'size-3 shrink-0 text-text-secondary transition-transform',
@@ -103,7 +105,7 @@ export default function CodeApprovalMenu({
         unmountOnHide={true}
         className={cn(
           'z-50 flex min-w-[280px] max-w-[min(320px,calc(100vw-2rem))] flex-col rounded-xl',
-          'border border-border-light bg-presentation p-1.5 shadow-lg',
+          'max-h-[var(--popover-available-height)] overflow-y-auto border border-border-light bg-presentation p-1.5 shadow-lg',
           'origin-bottom opacity-0 transition-[opacity,transform] duration-200 ease-out',
           'data-[enter]:scale-100 data-[enter]:opacity-100',
           'scale-95 data-[leave]:scale-95 data-[leave]:opacity-0',

client/src/components/Chat/Input/CodeWorkspaceMenu.tsx

@@ -90,15 +90,15 @@ export default function CodeWorkspaceMenu({
             aria-label={`${localize('com_ui_code_workspace')}: ${label}`}
             className={cn(
               composerControlClasses(),
-              'px-2.5 md:px-theme-normal',
+              'min-w-0 max-w-full px-2.5 md:px-theme-normal',
               isOpen && 'bg-surface-hover',
               (disabled || !canChoose) && 'cursor-not-allowed opacity-50',
             )}
           />
         }
       >
         <Icon className="size-4 shrink-0 text-text-secondary" aria-hidden="true" />
-        <span className="max-w-[12rem] truncate">{label}</span>
+        <span className="min-w-0 max-w-[12rem] truncate">{label}</span>
         {canChoose && (
           <ChevronDown
             className={cn(
@@ -116,7 +116,7 @@ export default function CodeWorkspaceMenu({
           unmountOnHide={true}
           className={cn(
             'z-50 flex min-w-[280px] max-w-[min(360px,calc(100vw-2rem))] flex-col rounded-xl',
-            'border border-border-light bg-presentation p-1.5 shadow-lg',
+            'max-h-[var(--popover-available-height)] overflow-y-auto border border-border-light bg-presentation p-1.5 shadow-lg',
             'origin-bottom opacity-0 transition-[opacity,transform] duration-200 ease-out',
             'data-[enter]:scale-100 data-[enter]:opacity-100',
             'scale-95 data-[leave]:scale-95 data-[leave]:opacity-0',

client/src/hooks/Agents/__tests__/useCodeWorkspace.test.tsx

@@ -156,7 +156,7 @@ describe('useCodeWorkspace', () => {
     expect(result.current.selections).toBeUndefined();
   });
 
-  it('requires an explicit choice when several workspaces are advertised', () => {
+  it('requires a workspace in full access mode and enables submission after explicit selection', () => {
     mockStatus.mockReturnValue([
       {
         data: {
@@ -170,12 +170,25 @@ describe('useCodeWorkspace', () => {
       },
     ]);
 
-    const { result } = renderHook(() => useCodeWorkspace(conversation()));
+    const initialConversation: TConversation = {
+      ...conversation(),
+      codeApprovalMode: 'fullAccess',
+    };
+    const { result, rerender } = renderHook(({ current }) => useCodeWorkspace(current), {
+      initialProps: { current: initialConversation },
+    });
 
     expect(result.current.state).toBe('choose');
     expect(result.current.canSubmit).toBe(false);
     expect(result.current.selections).toBeUndefined();
     expect(result.current.resolveSubmission()).toBeUndefined();
+
+    const selection = { environmentId: 'personal-vm', workspaceId: 'canary-a' };
+    rerender({ current: { ...initialConversation, codeWorkspaces: [selection] } });
+
+    expect(result.current.state).toBe('ready');
+    expect(result.current.canSubmit).toBe(true);
+    expect(result.current.resolveSubmission([selection])).toEqual({ codeWorkspaces: [selection] });
   });
 
   it('submits an explicit selection from several advertised workspaces', () => {