From 960fb2148ba238628ea4a9359e5b64c3b4fca94f Mon Sep 17 00:00:00 2001
From: Jeremy Eder <jeder@redhat.com>
Date: Sat, 4 Apr 2026 16:58:24 +0000
Subject: [PATCH] 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>
---
 components/frontend/src/app/layout.tsx                      | 5 +++++
 .../[sessionName]/components/session-settings-modal.tsx     | 6 +++---
 components/frontend/src/components/chat/ChatInputBox.tsx    | 4 ++--
 .../frontend/src/components/create-session-dialog.tsx       | 2 +-
 .../frontend/src/components/editable-session-name.tsx       | 2 +-
 components/frontend/src/components/ui/dropdown-menu.tsx     | 2 +-
 components/frontend/src/components/ui/popover.tsx           | 2 +-
 7 files changed, 14 insertions(+), 9 deletions(-)
 mode change 100644 => 100755 components/frontend/src/app/layout.tsx
 mode change 100644 => 100755 components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/session-settings-modal.tsx
 mode change 100644 => 100755 components/frontend/src/components/chat/ChatInputBox.tsx
 mode change 100644 => 100755 components/frontend/src/components/create-session-dialog.tsx
 mode change 100644 => 100755 components/frontend/src/components/editable-session-name.tsx
 mode change 100644 => 100755 components/frontend/src/components/ui/dropdown-menu.tsx
 mode change 100644 => 100755 components/frontend/src/components/ui/popover.tsx

diff --git a/components/frontend/src/app/layout.tsx b/components/frontend/src/app/layout.tsx
old mode 100644
new mode 100755
index 763791782..b30787eac
--- a/components/frontend/src/app/layout.tsx
+++ b/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({
diff --git a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/session-settings-modal.tsx b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/session-settings-modal.tsx
old mode 100644
new mode 100755
index d08aad409..93dfad8fc
--- a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/session-settings-modal.tsx
+++ b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/components/session-settings-modal.tsx
@@ -89,9 +89,9 @@ 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 (
@@ -99,7 +99,7 @@ export function SessionSettingsModal({
                   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)}
diff --git a/components/frontend/src/components/chat/ChatInputBox.tsx b/components/frontend/src/components/chat/ChatInputBox.tsx
old mode 100644
new mode 100755
index 82bbcfcac..5eae0e3ed
--- a/components/frontend/src/components/chat/ChatInputBox.tsx
+++ b/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}
diff --git a/components/frontend/src/components/create-session-dialog.tsx b/components/frontend/src/components/create-session-dialog.tsx
old mode 100644
new mode 100755
index ed27beea6..eeb79cafa
--- a/components/frontend/src/components/create-session-dialog.tsx
+++ b/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>
diff --git a/components/frontend/src/components/editable-session-name.tsx b/components/frontend/src/components/editable-session-name.tsx
old mode 100644
new mode 100755
index 4249c1eb4..f89311a95
--- a/components/frontend/src/components/editable-session-name.tsx
+++ b/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}
diff --git a/components/frontend/src/components/ui/dropdown-menu.tsx b/components/frontend/src/components/ui/dropdown-menu.tsx
old mode 100644
new mode 100755
index 09553cb13..3414a0616
--- a/components/frontend/src/components/ui/dropdown-menu.tsx
+++ b/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}
diff --git a/components/frontend/src/components/ui/popover.tsx b/components/frontend/src/components/ui/popover.tsx
old mode 100644
new mode 100755
index 40ace666a..3e2734134
--- a/components/frontend/src/components/ui/popover.tsx
+++ b/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}