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