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

feat(frontend): compact table density (32px row) global

Browse Source 
Add table-compact class to all 4 list surfaces: EngagementsListPage,
TemplatesListPage, UsersAdminPage, SimulationList. Remove inline
px-xl py-md from th/td — recipe handles padding. Row border-b moved
to recipe. WCAG SC 2.5.5 tradeoff accepted (BAS operator tool).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-06-21 22:11:24 +02:00
parent 9a8c5f52ab
commit 1819089925
4 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/SimulationList.tsx
View File

@@ -172,25 +172,25 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
</div>
<div className="card-product overflow-hidden p-0">
<table className="w-full text-left">
<table className="table-compact w-full text-left">
<thead className="bg-cloud border-b border-hairline">
<tr className="text-[12px] uppercase tracking-[0.5px] text-graphite">
<th className="px-xl py-md">Name</th>
<th className="px-xl py-md">MITRE</th>
<th className="px-xl py-md">Status</th>
<th className="px-xl py-md">Executed at</th>
<tr>
<th>Name</th>
<th>MITRE</th>
<th>Status</th>
<th>Executed at</th>
</tr>
</thead>
<tbody>
{data.map((sim) => (
<tr
key={sim.id}
className="border-b border-hairline last:border-0 hover:bg-cloud cursor-pointer"
className="hover:bg-cloud cursor-pointer"
onClick={() =>
navigate(`/engagements/${engagementId}/simulations/${sim.id}/edit`)
}
>
<td className="px-xl py-md">
<td>
<Link
to={`/engagements/${engagementId}/simulations/${sim.id}/edit`}
className="text-ink font-medium hover:underline"
@@ -199,7 +199,7 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
{sim.name}
</Link>
</td>
<td className="px-xl py-md text-charcoal text-[14px] font-mono">
<td className="text-charcoal font-mono">
{(() => {
const items = [
...(sim.tactics ?? []).map((t) => t.id),
@@ -210,10 +210,10 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
return `${items[0]} +${items.length - 1}`;
})()}
</td>
<td className="px-xl py-md">
<td>
<SimulationStatusBadge status={sim.status} />
</td>
<td className="px-xl py-md text-charcoal text-[14px] font-mono">
<td className="text-charcoal font-mono">
{formatDate(sim.executed_at)}
</td>
</tr>