sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

chain table round 4: double the indentation (owner refinement)

Browse Source 
Each staircase step is now TWO columns (36px): chains pl-12 — the
checkbox aligned with the cluster's FOLDER icon — and statements pl-21
— the checkbox where a chain icon WOULD sit (the chains lost theirs;
the pattern continues anyway). Live-measured: chain checkbox = folder
icon (336=336); statement checkbox = chain checkbox + 36 (372).
This commit is contained in:
amosblomqvist
2026-09-30 00:23:15 +03:00
parent d6a7228b15
commit b85aab6eb0
4 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chain-table.tsx
+13 -11
View File
@@ -33,12 +33,14 @@
* conclusion marker down there).
*
* THE ALIGNMENT STAIRCASE (owner ruling, round 3): every level's
* checkbox sits DIRECTLY UNDER its parent's expander arrow — open a
* folder and the chain checkboxes line up with the arrow, same one
* level down. Geometry: the expander shares the checkbox's 14px width
* (h-5 w-3.5), so each nesting step is exactly checkbox(14) + gap(4) =
* 18px — clusters pl-3 (12px, checkbox at 12), chains pl-7.5 (30px =
* the cluster expander), statements pl-12 (48px = the chain expander).
* checkbox sits ONE COLUMN under its parent's expander — aligned with
* the parent's ICON slot: open a folder and the chain checkboxes line
* up with the FOLDER icon; the statements step one more unit out (the
* would-be chain-icon column — the chains lost their icons but the
* pattern continues, owner: "double the indentation"). Geometry: every
* column is 14px + 4px gap = 18px and each step is TWO columns (36px) —
* clusters pl-3 (12px), chains pl-12 (48px = the cluster's folder
* icon), statements pl-21 (84px = where a chain icon WOULD sit).
*
* SORTING: all three columns sortable (owner ruling — "consistency is
* key"): Name (A→Z), Props (largest-first), Created (newest-first);
@@ -265,9 +267,9 @@ export function ChainTableBody({
{/* The list: NO per-row lines (owner ruling) — the ONLY horizontal
separators sit between cluster groups; the ALIGNMENT STAIRCASE
carries the hierarchy (owner round 3: each level's checkbox sits
under its parent's expander arrow — clusters pl-3, chains pl-7.5
under the folder arrow, statements pl-12 under the chain arrow).
carries the hierarchy (owner round 4, "double the indentation":
two-column steps — chains pl-12 aligned with the folder icon,
statements pl-21 where a chain icon would sit).
All three columns sort, small chevron on active. */}
<div className="min-h-0 flex-1 overflow-y-auto">
<div className="sticky top-0 z-10 flex items-center gap-1 px-3 py-1.5 text-[11px] uppercase tracking-widest text-muted-foreground/70 backdrop-blur">
@@ -355,7 +357,7 @@ export function ChainTableBody({
<div
data-testid={`chain-row-${chain.id}`}
aria-label={formatChainLine(chain, Object.fromEntries([...byId.entries()].map(([id, n]) => [id, { name: n.name }])))}
className="flex items-center gap-1 py-1 pl-7.5 pr-3"
className="flex items-center gap-1 py-1 pl-12 pr-3"
>
<RowCheckbox
checked={selectedInChain === memberIds.length && memberIds.length > 0}
@@ -402,7 +404,7 @@ export function ChainTableBody({
<div
key={id}
data-testid={`prop-row-${id}`}
className="flex items-start gap-2 py-1 pl-12 pr-3"
className="flex items-start gap-2 py-1 pl-21 pr-3"
>
<RowCheckbox
checked={selection.has(id)}