[87c7f3ec] Responsive grids: xl/2xl breakpoints + mobile overflow fix across all pages (#158) (#162) (#163)

* [87c7f3ec] feat(responsive): add xl/2xl breakpoint classes to dashboard grid layouts

Adds xl: and 2xl: Tailwind breakpoint classes to all grid layouts in
command-center.tsx, auditor-dashboard.tsx, team-health-cards.tsx,
agent-grid.tsx, and metrics/page.tsx so content can expand denser
beyond the current lg cap at ultrawide (2560px) viewports.

Key changes:
- team-health-cards.tsx: xl:grid-cols-4 2xl:grid-cols-6 (up to 6 teams)
- metrics/page.tsx Team Health: xl:grid-cols-5 2xl:grid-cols-6
- agent-grid.tsx: xl/2xl classes for all 3 column variants
- TokenUsageCostsSection: 2xl:grid-cols-6 added to row 1 (already had xl)
- Fixed-size grids (2-4 items): xl matches lg, 2xl same as xl

* [87c7f3ec] fix(mobile): stack grid-cols-12 layouts on mobile and fix git-browser header overflow

communications/page.tsx: change col-span-3/6 to col-span-12 lg:col-span-3/6 so
the three panels stack vertically on 375px viewports instead of being squished
to 25%/50% widths. Gate the viewport-height constraint (h-[calc(100vh-7rem)]) and
flex-1/min-h-0 to lg: so mobile can scroll naturally. Also fixes the Suspense
fallback skeleton with the same responsive col-spans.

git-browser.tsx: header flex row now goes flex-col on mobile and sm:flex-row on
sm+ (640px), eliminating the overflow from the w-64 SelectTrigger plus Refresh
button (346px combined) at 375px (327px content width). SelectTrigger is
w-full on mobile and sm:w-64 on sm+.

journals/page.tsx and git-browser.tsx grids already use col-span-12 lg:col-span-X
so no grid changes needed there.

---------

Co-authored-by: Frontend Developer 2 <fe-dev-2@agents.roboco.dev>

panel/src/components/agents/agent-grid.tsx

@@ -22,10 +22,10 @@ export function AgentGrid({
   columns = 4,
 }: AgentGridProps) {
   const gridCols = {
-    3: "md:grid-cols-3",
-    4: "md:grid-cols-3 lg:grid-cols-4",
-    5: "md:grid-cols-3 lg:grid-cols-5",
-  }[columns] || "md:grid-cols-3 lg:grid-cols-4";
+    3: "md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
+    4: "md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5",
+    5: "md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-5",
+  }[columns] || "md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
 
   return (
     <div>

panel/src/components/auditor/auditor-dashboard.tsx

@@ -48,7 +48,7 @@ export function AuditorDashboard() {
       </div>
 
       {/* Top Row: Live Feeds + Quality Metrics */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-6">
         <LiveFeedsPanel
           feeds={dashboard?.live_feeds}
           isLoading={loadingDashboard}
@@ -60,7 +60,7 @@ export function AuditorDashboard() {
       </div>
 
       {/* Bottom Row: Flagged Items + Reports */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-6">
         <FlaggedItemsPanel flags={flags} isLoading={loadingFlags} />
         <ReportsPanel reports={reports} isLoading={loadingReports} />
       </div>

panel/src/components/dashboard/command-center.tsx

@@ -63,7 +63,7 @@ export function CommandCenter() {
       </section>
 
       {/* Metrics, Alerts, and Usage Row */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-6">
         <KeyMetricsPanel
           metrics={overview?.key_metrics}
           isLoading={loadingOverview}
@@ -73,7 +73,7 @@ export function CommandCenter() {
       </div>
 
       {/* Blockers and Activity Row */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-6">
         <ActiveBlockersPanel tasks={tasks} isLoading={loadingTasks} />
         <RecentActivityFeed
           activities={activity as Activity[] | undefined}

panel/src/components/dashboard/team-health-cards.tsx

@@ -12,7 +12,7 @@ interface TeamHealthCardsProps {
 export function TeamHealthCards({ teams, isLoading }: TeamHealthCardsProps) {
   if (isLoading) {
     return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-6 gap-4">
         {[...Array(4)].map((_, i) => (
           <Skeleton key={i} className="h-48" />
         ))}
@@ -29,7 +29,7 @@ export function TeamHealthCards({ teams, isLoading }: TeamHealthCardsProps) {
   }
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-6 gap-4">
       {teams.map((health) => (
         <TeamHealthCard key={health.team} health={health} />
       ))}

panel/src/components/git/git-browser.tsx

@@ -193,7 +193,7 @@ function GitBrowserContent() {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 className="text-3xl font-bold tracking-tight">Git Operations</h1>
           <p className="text-muted-foreground">
@@ -203,7 +203,7 @@ function GitBrowserContent() {
         <div className="flex items-center gap-2">
           {/* Project Selector */}
           <Select value={projectSlug} onValueChange={handleProjectChange}>
-            <SelectTrigger className="w-64">
+            <SelectTrigger className="w-full sm:w-64">
               <FolderGit2 className="h-4 w-4 mr-2" />
               <SelectValue placeholder="Select a project..." />
             </SelectTrigger>