chore(web): mobile-responsive layout for dashboard and session views

[ashish921998]

Summary

Adds proper mobile-responsive layouts to the dashboard and session views after the recent UI/UX redesign (#528).

• Sidebar: Auto-hides on mobile (<768px) with hamburger toggle button and overlay drawer with backdrop
• Dashboard hero: Stats cards and controls stack vertically on mobile
• Kanban board: Columns stack vertically on mobile instead of horizontal scroll
• Session cards: Flexible height with 44px minimum touch targets for all interactive elements
• Session detail: Responsive header metadata, full-width terminal on mobile
• Global: Added 768px and 480px breakpoints with phone-specific single-column layouts

Desktop layout remains completely unchanged.

Closes #633

Test plan

• Open browser DevTools responsive mode
• Verify desktop layout unchanged at 1200px+
• At 768px: sidebar hidden, hamburger visible, hero section stacks, kanban columns stack vertically
• At 480px: single-column stat cards, smaller title, reduced terminal padding
• At 375px (iPhone SE): all content single-column, touch-friendly
• Test hamburger menu: click opens drawer with backdrop, click backdrop closes
• Verify all buttons/controls meet 44px minimum touch target
• Test both light and dark themes at mobile widths
• Navigate to session detail page — verify responsive header and full-width terminal

🤖 Generated with Claude Code

[ashish921998]

Code review

Found 1 issue:

1. MobileBottomNav is rendered unconditionally in SessionDetail — it will appear on desktop. Both Dashboard and PullRequestsPage gate it with {isMobile ? <MobileBottomNav /> : null}, but SessionDetail renders it on every screen size.

agent-orchestrator/packages/web/src/components/SessionDetail.tsx

Lines 415 to 425 in 740933e

	</main>
	</div>
	<MobileBottomNav
	ariaLabel="Session navigation"
	activeTab={isOrchestrator ? "orchestrator" : undefined}
	dashboardHref={dashboardHref}
	prsHref={prsHref}
	orchestratorHref={orchestratorHref}
	/>
	</div>
	);

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Cache deduplication defeated by inconsistent argument passing
  • Removed redundant resolveDashboardProjectFilter calls in generateMetadata functions so both generateMetadata and page components pass the same raw searchParams.project value to getDashboardPageData, ensuring cache key consistency.
• ✅ Fixed: Session detail page lacks mobile bottom nav padding
  • Added padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) to .session-detail-page .mx-auto in the mobile breakpoint to match the dashboard-main padding pattern and prevent content from being hidden behind the fixed bottom nav.

Or push these changes by commenting:

@cursor push 6e4cda3a39

Preview (6e4cda3a39)

diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css
--- a/packages/web/src/app/globals.css
+++ b/packages/web/src/app/globals.css
@@ -970,7 +970,8 @@
 }
 
 @keyframes session-status-dot-pulse {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
     opacity: 0.88;
   }
@@ -981,7 +982,8 @@
 }
 
 @keyframes session-status-active-breathe {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow:
       inset 0 1px 0 color-mix(in srgb, white 16%, transparent),
       0 0 0 0 color-mix(in srgb, var(--color-status-working) 0%, transparent);
@@ -994,7 +996,8 @@
 }
 
 @keyframes session-status-ready-breathe {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow:
       inset 0 1px 0 color-mix(in srgb, white 16%, transparent),
       0 0 0 0 color-mix(in srgb, var(--color-status-ready) 0%, transparent);
@@ -1007,7 +1010,8 @@
 }
 
 @keyframes session-status-waiting-breathe {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow:
       inset 0 1px 0 color-mix(in srgb, white 16%, transparent),
       0 0 0 0 color-mix(in srgb, var(--color-status-attention) 0%, transparent);
@@ -1936,7 +1940,6 @@
 
 /* Card glow effects removed for Linear-clean look */
 
-
 @media (max-width: 960px) {
   .dashboard-hero__content {
     padding: 12px 14px;
@@ -2173,8 +2176,7 @@
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     padding: 8px max(12px, env(safe-area-inset-right, 0px))
-      calc(8px + env(safe-area-inset-bottom, 0px))
-      max(12px, env(safe-area-inset-left, 0px));
+      calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
   }
 
   .mobile-bottom-nav__item {
@@ -2407,6 +2409,7 @@
   .session-detail-page .mx-auto {
     padding-left: 12px;
     padding-right: 12px;
+    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
   }
 
   .session-detail-page {
@@ -2546,7 +2549,9 @@
   }
 
   /* -- iOS auto-zoom prevention on input focus -- */
-  input, textarea, select {
+  input,
+  textarea,
+  select {
     font-size: 16px;
   }
 
@@ -2876,7 +2881,10 @@
     font-family: var(--font-sans);
     font-size: 12px;
     cursor: pointer;
-    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
+    transition:
+      border-color 0.12s ease,
+      color 0.12s ease,
+      background 0.12s ease;
   }
 
   .quick-reply__preset-btn:hover {
@@ -2896,7 +2904,9 @@
     font-size: 13px;
     resize: none;
     overflow: hidden;
-    transition: height 0.15s ease, border-color 0.12s ease;
+    transition:
+      height 0.15s ease,
+      border-color 0.12s ease;
     box-sizing: border-box;
     width: 100%;
   }
@@ -3301,7 +3311,9 @@
   z-index: var(--z-connection-bar, 500);
   height: 0;
   overflow: hidden;
-  transition: height 0.2s ease, opacity 0.3s ease;
+  transition:
+    height 0.2s ease,
+    opacity 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3327,6 +3339,11 @@
 }
 
 @keyframes connection-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
 }

diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -8,8 +8,7 @@
   searchParams: Promise<{ project?: string }>;
 }): Promise<Metadata> {
   const searchParams = await props.searchParams;
-  const projectFilter = resolveDashboardProjectFilter(searchParams.project);
-  const pageData = await getDashboardPageData(projectFilter);
+  const pageData = await getDashboardPageData(searchParams.project);
   return { title: { absolute: `ao | ${pageData.projectName}` } };
 }
 

diff --git a/packages/web/src/app/prs/page.tsx b/packages/web/src/app/prs/page.tsx
--- a/packages/web/src/app/prs/page.tsx
+++ b/packages/web/src/app/prs/page.tsx
@@ -8,8 +8,7 @@
   searchParams: Promise<{ project?: string }>;
 }): Promise<Metadata> {
   const searchParams = await props.searchParams;
-  const projectFilter = resolveDashboardProjectFilter(searchParams.project);
-  const pageData = await getDashboardPageData(projectFilter);
+  const pageData = await getDashboardPageData(searchParams.project);
   return { title: { absolute: `ao | ${pageData.projectName} PRs` } };
 }

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[harsh-batheja]

test comment

[harsh-batheja]

Code Review — Post-fix issues & remaining unresolved items

New issues introduced after previous review (5)

1. handleSend throw creates inconsistent error UX on action buttons (Medium)
2. handleMerge/handleRestore lack try/catch for network failures (Medium)
3. projectOrchestratorId reset effect creates re-fetch burst loop (Medium)
4. Quick-reply desktop styling uses mobile-sized 44px touch targets (Low)
5. Desktop PRs link flashes on mobile before useMediaQuery kicks in (Low)

Still unresolved from previous review (2)

6. Non-orchestrator session pages still poll /api/sessions every 5s (Medium)
7. User accordion collapse overridden by SSE updates when mobileFilter === "all" (Medium)

See inline comments for details.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}