knacky/mimic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(frontend): design-review polish — table-compact height, header type-scale, tabs a11y

Browse Source 
Fix 1 (A): move row height constraint from min-height on tbody tr
(CSS no-op on table-row) to height: 32px on td (works on table-cell).
Fix 2 (A): table header text-[11px] -> text-[12px] to align with
documented caption scale.
Fix 3: add aria-controls + id to Tabs buttons; wrap active tab content
in role="tabpanel" + aria-labelledby in EngagementDetailPage.
Test: add aria-controls/id assertion to Tabs.test.tsx (234 total).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-06-21 22:18:09 +02:00
parent 1324a0c8ce
commit 790ced4204
4 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/pages/EngagementDetailPage.tsx
View File

@@ -68,34 +68,40 @@ export function EngagementDetailPage(): JSX.Element {
<Tabs items={tabs} activeId={activeTab} onChange={setActiveTab} />
{activeTab === 'schedule' && (
<div className="card-product">
<h2 className="text-[20px] font-medium mb-md">Schedule</h2>
<dl className="grid grid-cols-2 gap-md text-[14px]">
<dt className="text-graphite">Start date</dt>
<dd className="text-ink font-mono">{eng.start_date}</dd>
<dt className="text-graphite">End date</dt>
<dd className="text-ink font-mono">{eng.end_date ?? '—'}</dd>
<dt className="text-graphite">Status</dt>
<dd className="text-ink capitalize">{eng.status}</dd>
<dt className="text-graphite">Created at</dt>
<dd className="text-ink font-mono">{eng.created_at}</dd>
</dl>
</div>
)}
<div
role="tabpanel"
id={`tabpanel-${activeTab}`}
aria-labelledby={`tab-${activeTab}`}
>
{activeTab === 'schedule' && (
<div className="card-product">
<h2 className="text-[20px] font-medium mb-md">Schedule</h2>
<dl className="grid grid-cols-2 gap-md text-[14px]">
<dt className="text-graphite">Start date</dt>
<dd className="text-ink font-mono">{eng.start_date}</dd>
<dt className="text-graphite">End date</dt>
<dd className="text-ink font-mono">{eng.end_date ?? '—'}</dd>
<dt className="text-graphite">Status</dt>
<dd className="text-ink capitalize">{eng.status}</dd>
<dt className="text-graphite">Created at</dt>
<dd className="text-ink font-mono">{eng.created_at}</dd>
</dl>
</div>
)}
{activeTab === 'description' && (
<div className="card-product">
<h2 className="text-[20px] font-medium mb-md">Description</h2>
<p className="text-[16px] text-charcoal whitespace-pre-line">
{eng.description?.trim() ? eng.description : 'No description provided.'}
</p>
</div>
)}
{activeTab === 'description' && (
<div className="card-product">
<h2 className="text-[20px] font-medium mb-md">Description</h2>
<p className="text-[16px] text-charcoal whitespace-pre-line">
{eng.description?.trim() ? eng.description : 'No description provided.'}
</p>
</div>
)}
{activeTab === 'simulations' && (
<SimulationList engagementId={eng.id} />
)}
{activeTab === 'simulations' && (
<SimulationList engagementId={eng.id} />
)}
</div>
</div>
);
}