Skip to content

Commit 0213dbd

Browse files
jpr5jpr5
committed
fix(showcase): dashboard UI — sticky headers, tighter cells, centered badges
Restructure page to viewport-filling flex layout so table column headers stick below the overlay toggle bar on scroll. Halve cell padding, reduce column min-width, center UWCT/health badges and links. Remove duplicate CellStatus from CommandCell (ComposedCell HealthLayer handles it). Split stats bar out of sticky container so it scrolls away naturally.
1 parent 616a45b commit 0213dbd

10 files changed

Lines changed: 663 additions & 57 deletions

File tree

‎pnpm-lock.yaml‎

Lines changed: 595 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎showcase/shell-dashboard/next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3-
/// <reference path="./.next/types/routes.d.ts" />
3+
import "./.next/dev/types/routes.d.ts";
44

55
// NOTE: This file should not be edited
66
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

‎showcase/shell-dashboard/src/app/page.tsx‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,9 @@ export default function Page() {
140140
);
141141

142142
return (
143-
<div data-testid="tab-shell" className="pb-20">
144-
{/* 2-tab bar: Matrix | Ops */}
145-
<div className="flex items-center gap-0 border-b border-[var(--border)] px-8">
143+
<div data-testid="tab-shell" className="h-dvh flex flex-col">
144+
{/* Tab bar — pinned above scroll area */}
145+
<div className="flex-shrink-0 flex items-center gap-0 border-b border-[var(--border)] px-8">
146146
<button
147147
type="button"
148148
data-testid="tab-matrix"
@@ -169,39 +169,46 @@ export default function Page() {
169169
</button>
170170
</div>
171171

172-
{/* Tab content */}
173172
{activeTab === "matrix" && (
174173
<>
175-
<div className="sticky top-0 z-30 px-8 py-3 flex flex-col gap-3 bg-[var(--bg-surface)] border-b border-[var(--border)]">
174+
{/* Overlay toggle — pinned below tab bar */}
175+
<div className="flex-shrink-0 px-8 py-3 bg-[var(--bg-surface)] border-b border-[var(--border)]">
176176
<OverlayToggleBar
177177
overlays={overlays}
178178
onToggle={toggle}
179179
onApplyPreset={applyPreset}
180180
activePreset={activePreset}
181181
/>
182-
<AdaptiveStatsBar
182+
</div>
183+
{/* Single scroll area — stats bar and title scroll away, table headers stick */}
184+
<div className="flex-1 min-h-0 overflow-auto">
185+
<div className="px-8 py-3 border-b border-[var(--border)]">
186+
<AdaptiveStatsBar
187+
overlays={overlays}
188+
catalog={catalogData}
189+
healthStats={healthStats}
190+
parityStats={parityStats}
191+
docsStats={docsStats}
192+
/>
193+
</div>
194+
<FeatureGrid
195+
title="Feature Matrix"
196+
renderCell={renderCell}
197+
minColWidth={180}
198+
liveStatus={liveStatus}
199+
connection={connection}
183200
overlays={overlays}
184201
catalog={catalogData}
185-
healthStats={healthStats}
186-
parityStats={parityStats}
187-
docsStats={docsStats}
188202
/>
203+
<AdaptiveLegend overlays={overlays} />
189204
</div>
190-
<FeatureGrid
191-
title="Feature Matrix"
192-
renderCell={renderCell}
193-
minColWidth={260}
194-
liveStatus={liveStatus}
195-
connection={connection}
196-
overlays={overlays}
197-
catalog={catalogData}
198-
/>
199-
<AdaptiveLegend overlays={overlays} />
200205
</>
201206
)}
202207

203208
{activeTab === "ops" && (
204-
<StatusTab entries={probeEntries} onTrigger={handleTrigger} />
209+
<div className="flex-1 min-h-0 overflow-auto">
210+
<StatusTab entries={probeEntries} onTrigger={handleTrigger} />
211+
</div>
205212
)}
206213
</div>
207214
);

‎showcase/shell-dashboard/src/components/cell-pieces.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export function DocsRow({
8181
: probed.shell;
8282

8383
return (
84-
<div className="flex items-center gap-2.5">
84+
<div className="flex items-center justify-center gap-2.5">
8585
<DocsLink
8686
label="docs-og"
8787
href={ogHref}
@@ -299,7 +299,7 @@ export function CellStatus({ ctx }: { ctx: CellContext }) {
299299
// worktree) and is tracked in the cross-worktree concerns of this fix.
300300

301301
return (
302-
<div className="flex items-center gap-2.5">
302+
<div className="flex items-center justify-center gap-2.5">
303303
<LiveBadge
304304
name="E2E"
305305
badge={cell.e2e}

‎showcase/shell-dashboard/src/components/command-cell.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
// informational and runnable demos.
1010

1111
import type { CellContext } from "@/components/feature-grid";
12-
import { CellStatus } from "@/components/cell-pieces";
1312

1413
export function CommandCell({ ctx }: { ctx: CellContext }) {
1514
const command = ctx.demo.command ?? "";
@@ -24,7 +23,6 @@ export function CommandCell({ ctx }: { ctx: CellContext }) {
2423
</code>
2524
<CopyButton text={command} />
2625
</div>
27-
<CellStatus ctx={ctx} />
2826
</div>
2927
);
3028
}

‎showcase/shell-dashboard/src/components/composed-cell.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function LinksLayer({ ctx }: { ctx: CellContext }) {
3737
const links = urlsFor(ctx);
3838

3939
return (
40-
<div className="flex items-center gap-2.5">
40+
<div className="flex items-center justify-center gap-1.5">
4141
<a
4242
href={links.demoUrl}
4343
target="_blank"
@@ -60,7 +60,7 @@ function LinksLayer({ ctx }: { ctx: CellContext }) {
6060
}
6161

6262
/**
63-
* Render the Depth layer: DepthChip showing D0-D4 with regression marker.
63+
* Render the Depth layer: DepthChip showing D0-D6 with regression marker.
6464
* Clicking the chip opens a CellDrilldown popup with per-badge dimension details.
6565
*/
6666
function DepthLayer({
@@ -184,7 +184,7 @@ export function ComposedCell({
184184
return (
185185
<div
186186
data-testid="composed-cell"
187-
className={`flex flex-col items-center gap-1 text-[11px] ${isTesting ? "opacity-60" : ""}`}
187+
className={`flex flex-col items-center gap-0.5 text-[11px] ${isTesting ? "opacity-60" : ""}`}
188188
>
189189
{hasLinks && <LinksLayer ctx={ctx} />}
190190
{hasDepth && <DepthLayer ctx={ctx} catalogCell={catalogCell} />}

‎showcase/shell-dashboard/src/components/feature-grid.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ function CategorySection({
263263
key={feature.id}
264264
className="border-t border-[var(--border)] hover:bg-[var(--bg-hover)]"
265265
>
266-
<td className="sticky left-0 z-10 bg-[var(--bg-surface)] px-4 py-2 border-r border-[var(--border)] align-top">
266+
<td className="sticky left-0 z-10 bg-[var(--bg-surface)] px-1 py-1 border-r border-[var(--border)] align-top">
267267
<div
268268
className={
269269
testing
@@ -289,7 +289,7 @@ function CategorySection({
289289
/>
290290
) : (
291291
<td
292-
className="sticky left-[260px] z-10 px-3 py-2 border-r-2 border-r-[#c4b5fd] border-l border-[var(--border)] align-top"
292+
className="sticky left-[260px] z-10 px-1 py-1 border-r-2 border-r-[#c4b5fd] border-l border-[var(--border)] align-top"
293293
style={{ backgroundColor: "#f5f0ff" }}
294294
>
295295
<span className="text-[var(--text-muted)] text-[10px]">
@@ -302,7 +302,7 @@ function CategorySection({
302302
return (
303303
<td
304304
key={integration.slug}
305-
className="border-l border-[var(--border)] px-3 py-2 align-top text-center"
305+
className="border-l border-[var(--border)] px-1 py-1 align-top text-center"
306306
>
307307
{demo ? (
308308
renderCell({
@@ -439,7 +439,7 @@ export function FeatureGrid({
439439
const categoryColSpan = integrations.length + 1 + (showRefDepth ? 1 : 0);
440440

441441
return (
442-
<div className="p-8 max-w-[100vw]">
442+
<div className="p-8">
443443
<header className="mb-6">
444444
<div className="flex items-center gap-3">
445445
<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
@@ -453,11 +453,11 @@ export function FeatureGrid({
453453

454454
{connection === "error" && <OfflineBanner />}
455455

456-
<div className="overflow-auto rounded-lg border border-[var(--border)] bg-[var(--bg-surface)]">
456+
<div className="rounded-lg border border-[var(--border)] bg-[var(--bg-surface)]" style={{ width: 'fit-content', minWidth: '100%' }}>
457457
<table className="border-collapse text-sm">
458458
<thead>
459459
<tr>
460-
<th className="sticky left-0 top-0 z-30 bg-[var(--bg-muted)] px-4 py-3 text-left min-w-[260px] border-b border-[var(--border)]">
460+
<th className="sticky left-0 top-0 z-30 bg-[var(--bg-muted)] px-1 py-1.5 text-left min-w-[160px] border-b border-[var(--border)]">
461461
<span className="text-[10px] font-medium uppercase tracking-wider text-[var(--text-muted)]">
462462
Feature
463463
</span>
@@ -498,7 +498,7 @@ export function FeatureGrid({
498498
return (
499499
<th
500500
key={integration.slug}
501-
className="sticky top-0 z-20 bg-[var(--bg-muted)] px-3 py-3 text-left border-b border-l border-[var(--border)] font-normal"
501+
className="sticky top-0 z-20 bg-[var(--bg-muted)] px-1 py-1.5 text-center border-b border-l border-[var(--border)] font-normal"
502502
style={{ minWidth: `${minColWidth}px` }}
503503
>
504504
<div className="text-xs font-semibold text-[var(--text)]">

‎showcase/shell-dashboard/src/components/level-strip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function LevelStrip({
6767

6868
return (
6969
<div
70-
className="flex items-center gap-1"
70+
className="flex items-center justify-center gap-1"
7171
data-testid="level-strip"
7272
data-slug={slug}
7373
>

‎showcase/shell-dashboard/src/components/overlay-column-header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function OverlayColumnHeader({
4848

4949
return (
5050
<th
51-
className="sticky top-0 z-20 bg-[var(--bg-muted)] px-3 py-3 text-left border-b border-l border-[var(--border)] font-normal"
51+
className="sticky top-0 z-20 bg-[var(--bg-muted)] px-1 py-1.5 text-center border-b border-l border-[var(--border)] font-normal"
5252
style={{ minWidth: `${minWidth}px` }}
5353
>
5454
{/* Always: integration name */}

‎showcase/shell-dashboard/tsconfig.json‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{
22
"compilerOptions": {
33
"target": "ES2017",
4-
"lib": ["dom", "dom.iterable", "esnext"],
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
59
"allowJs": true,
610
"skipLibCheck": true,
711
"strict": true,
@@ -11,11 +15,27 @@
1115
"moduleResolution": "bundler",
1216
"resolveJsonModule": true,
1317
"isolatedModules": true,
14-
"jsx": "preserve",
18+
"jsx": "react-jsx",
1519
"incremental": true,
16-
"plugins": [{ "name": "next" }],
17-
"paths": { "@/*": ["./src/*"] }
20+
"plugins": [
21+
{
22+
"name": "next"
23+
}
24+
],
25+
"paths": {
26+
"@/*": [
27+
"./src/*"
28+
]
29+
}
1830
},
19-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
20-
"exclude": ["node_modules"]
31+
"include": [
32+
"next-env.d.ts",
33+
"**/*.ts",
34+
"**/*.tsx",
35+
".next/types/**/*.ts",
36+
".next/dev/types/**/*.ts"
37+
],
38+
"exclude": [
39+
"node_modules"
40+
]
2141
}

0 commit comments

Comments
 (0)