refactor: stack dashboard summary cards

apps/web/src/App.tsx

@@ -642,8 +642,8 @@ function Dashboard() {
         </div>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-3 xl:grid-cols-4">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)] xl:items-stretch">
-        <Card className="md:col-span-2">
+        <Card className="h-full">
           <CardHeader>
             <CardTitle>Unified capacity</CardTitle>
           </CardHeader>
@@ -676,6 +676,7 @@ function Dashboard() {
           </CardContent>
         </Card>
 
+        <div className="grid gap-4 xl:grid-rows-3">
           {[
             {
               title: 'Connected sessions',
@@ -693,7 +694,7 @@ function Dashboard() {
               tone: 'text-rose-300',
             },
           ].map((item) => (
-          <Card key={item.title}>
+            <Card key={item.title} className="h-full">
               <CardHeader>
                 <CardDescription>{item.title}</CardDescription>
                 <CardTitle className={item.tone}>
@@ -703,6 +704,7 @@ function Dashboard() {
             </Card>
           ))}
         </div>
+      </div>
 
       <div className="mt-6 grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
         <Card className="min-w-0">

apps/web/test/dashboard-summary-layout.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const appSource = readFileSync(join(import.meta.dir, '../src/App.tsx'), 'utf8');
+
+describe('dashboard summary layout', () => {
+  test('stacks the session summary cards vertically beside unified capacity on desktop', () => {
+    expect(appSource).toContain(
+      'className="grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)] xl:items-stretch"',
+    );
+    expect(appSource).toContain('className="h-full"');
+    expect(appSource).toContain('className="grid gap-4 xl:grid-rows-3"');
+    expect(appSource).not.toContain('className="grid gap-4 md:grid-cols-3 xl:grid-cols-4"');
+    expect(appSource).not.toContain('className="md:col-span-2"');
+  });
+});