fix: improve frontend mobile responsiveness

Add viewport meta tag, cap popover/dropdown widths to viewport,
fix session settings modal layout on small screens, and collapse
chat toolbar labels on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jeremyeder

components/frontend/src/app/layout.tsx

@@ -17,6 +17,11 @@ export const metadata: Metadata = {
     "ACP is an AI-native agentic-powered enterprise software development platform",
 };
 
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
 // Force rebuild timestamp: 2025-11-20T16:38:00
 
 export default function RootLayout({

components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/session-settings-modal.tsx

@@ -89,17 +89,17 @@ export function SessionSettingsModal({
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
 
-        <div className="flex h-[540px]">
+        <div className="flex flex-col md:flex-row h-auto md:h-[540px] max-h-[70vh]">
           {/* Sidebar nav */}
-          <nav className="w-48 border-r p-2 space-y-1 flex-shrink-0">
+          <nav className="flex md:flex-col md:w-48 border-b md:border-b-0 md:border-r p-2 gap-1 flex-shrink-0 overflow-x-auto">
             {tabs.map((tab) => {
               const Icon = tab.icon;
               return (
                 <Button
                   key={tab.id}
                   variant="ghost"
                   className={cn(
-                    "w-full justify-start gap-2 font-normal",
+                    "w-auto md:w-full justify-center md:justify-start gap-2 font-normal",
                     activeTab === tab.id && "bg-accent font-medium"
                   )}
                   onClick={() => setActiveTab(tab.id)}

components/frontend/src/components/chat/ChatInputBox.tsx

@@ -619,7 +619,7 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = ({
                     <PopoverTrigger asChild>
                       <Button variant="outline" size="sm" className="h-7 gap-1.5" disabled={agents.length === 0}>
                         <Users className="h-3.5 w-3.5" />
-                        Agents
+                        <span className="hidden sm:inline">Agents</span>
                         {agents.length > 0 && (
                           <Badge variant="secondary" className="ml-0.5 h-4 px-1.5 text-[10px] font-medium">
                             {agents.length}
@@ -645,7 +645,7 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = ({
                     <PopoverTrigger asChild>
                       <Button variant="outline" size="sm" className="h-7 gap-1.5" disabled={commands.length === 0}>
                         <Terminal className="h-3.5 w-3.5" />
-                        Commands
+                        <span className="hidden sm:inline">Commands</span>
                         {commands.length > 0 && (
                           <Badge variant="secondary" className="ml-0.5 h-4 px-1.5 text-[10px] font-medium">
                             {commands.length}

components/frontend/src/components/create-session-dialog.tsx

@@ -265,7 +265,7 @@ export function CreateSessionDialog({
     <>
       <div onClick={handleTriggerClick}>{trigger}</div>
       <Dialog open={open} onOpenChange={handleOpenChange}>
-        <DialogContent className="w-full max-w-3xl min-w-[650px] max-h-[85vh] overflow-y-auto">
+        <DialogContent className="w-full max-w-3xl sm:min-w-[650px] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>Create Session</DialogTitle>
           </DialogHeader>

components/frontend/src/components/editable-session-name.tsx

@@ -100,7 +100,7 @@ export function EditableSessionName({
           }}
           placeholder="New session..."
           disabled={isSaving}
-          className={cn('h-auto py-1 px-2 w-auto min-w-[300px] flex-1 !text-[1em] !font-[inherit] !leading-[inherit]', className)}
+          className={cn('h-auto py-1 px-2 w-auto min-w-[200px] sm:min-w-[300px] flex-1 !text-[1em] !font-[inherit] !leading-[inherit]', className)}
         />
         <Button
           onClick={handleSave}

components/frontend/src/components/ui/dropdown-menu.tsx

@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

components/frontend/src/components/ui/popover.tsx

@@ -36,7 +36,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}