p-sw/CodexDash
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: stack dashboard summary cards

Browse Source
This commit is contained in:
Shinwoo PARK
2026-05-09 16:25:12 +09:00
parent fa650562ce
commit 89983fd84b
2 changed files with 47 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/web/src/App.tsx
View File

@@ -642,8 +642,8 @@ function Dashboard() {
</div> </div>
</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> <CardHeader>
<CardTitle>Unified capacity</CardTitle> <CardTitle>Unified capacity</CardTitle>
</CardHeader> </CardHeader>
@@ -676,32 +676,34 @@ function Dashboard() {
</CardContent> </CardContent>
</Card> </Card>
{[ <div className="grid gap-4 xl:grid-rows-3">
{ {[
title: 'Connected sessions', {
value: summary.totals.totalAccounts, title: 'Connected sessions',
tone: 'text-sky-300', value: summary.totals.totalAccounts,
}, tone: 'text-sky-300',
{ },
title: 'Healthy sessions', {
value: summary.totals.activeAccounts, title: 'Healthy sessions',
tone: 'text-emerald-300', value: summary.totals.activeAccounts,
}, tone: 'text-emerald-300',
{ },
title: 'Errored sessions', {
value: summary.totals.erroredAccounts, title: 'Errored sessions',
tone: 'text-rose-300', value: summary.totals.erroredAccounts,
}, tone: 'text-rose-300',
].map((item) => ( },
<Card key={item.title}> ].map((item) => (
<CardHeader> <Card key={item.title} className="h-full">
<CardDescription>{item.title}</CardDescription> <CardHeader>
<CardTitle className={item.tone}> <CardDescription>{item.title}</CardDescription>
{item.value.toLocaleString()} <CardTitle className={item.tone}>
</CardTitle> {item.value.toLocaleString()}
</CardHeader> </CardTitle>
</Card> </CardHeader>
))} </Card>
))}
</div>
</div> </div>
<div className="mt-6 grid gap-6 xl:grid-cols-[1.15fr_0.85fr]"> <div className="mt-6 grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">

17
apps/web/test/dashboard-summary-layout.test.js Normal file
View File

@@ -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"');
});
});