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

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>

frontend/src/components/Tabs.tsx

@@ -21,8 +21,10 @@ export function Tabs({ items, activeId, onChange }: TabsProps): JSX.Element {
         return (
           <button
             key={item.id}
+            id={`tab-${item.id}`}
             role="tab"
             aria-selected={isActive}
+            aria-controls={`tabpanel-${item.id}`}
             type="button"
             onClick={() => onChange(item.id)}
             className={`tab-underline${isActive ? ' tab-underline-active' : ''} pb-xs`}

frontend/src/pages/EngagementDetailPage.tsx

@@ -68,6 +68,11 @@ export function EngagementDetailPage(): JSX.Element {
 
       <Tabs items={tabs} activeId={activeTab} onChange={setActiveTab} />
 
+      <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>
@@ -97,5 +102,6 @@ export function EngagementDetailPage(): JSX.Element {
           <SimulationList engagementId={eng.id} />
         )}
       </div>
+    </div>
   );
 }

frontend/src/styles/index.css

@@ -179,16 +179,16 @@
 
   /* ─── Compact table density (L4) — 32px row height, global ──────────── */
   .table-compact thead tr {
-    @apply text-[11px] uppercase tracking-[0.5px] text-graphite;
+    @apply text-[12px] uppercase tracking-[0.5px] text-graphite;
   }
   .table-compact th {
     @apply px-md py-xxs;
   }
   .table-compact td {
     @apply px-md py-xxs caption-md;
+    height: 32px;
   }
   .table-compact tbody tr {
     @apply border-b border-hairline last:border-0;
-    min-height: 32px;
   }
 }

frontend/tests/components/Tabs.test.tsx

@@ -49,6 +49,16 @@ describe('Tabs', () => {
     expect(onChange).toHaveBeenCalledWith('description');
   });
 
+  it('sets aria-controls and id on each tab button', () => {
+    render(<Tabs items={ITEMS} activeId="schedule" onChange={vi.fn()} />);
+    const schedBtn = screen.getByRole('tab', { name: /Schedule/i });
+    expect(schedBtn).toHaveAttribute('id', 'tab-schedule');
+    expect(schedBtn).toHaveAttribute('aria-controls', 'tabpanel-schedule');
+    const simsBtn = screen.getByRole('tab', { name: /Simulations/i });
+    expect(simsBtn).toHaveAttribute('id', 'tab-simulations');
+    expect(simsBtn).toHaveAttribute('aria-controls', 'tabpanel-simulations');
+  });
+
   it('has no rounded-md, transition-*, or shadow-* on tab buttons (brutalism)', () => {
     render(<Tabs items={ITEMS} activeId="schedule" onChange={vi.fn()} />);
     for (const btn of screen.getAllByRole('tab')) {