[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/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} />
       ))}