Skip to content

fix(board): no status rail on blocked cards, plus a card-rail guard (TASK-746) #3179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lilyshen0722 merged 3 commits into from
Nov 1, 2026
Merged

fix(board): no status rail on blocked cards, plus a card-rail guard (TASK-746) #3179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5487bf
fix(board): blocked cards look like every other card, guard against c…
lilyshen0722 Nov 1, 2026
d06ede9
test(board): card-rail guard ignores comments and covers border-inlin…
lilyshen0722 Nov 1, 2026
ef9078a
Merge origin/main into otto/task-746
lilyshen0722 Nov 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions frontend/src/v2/__tests__/v2-layout-invariants.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5134,11 +5134,31 @@ describe('task priority and lease signals (TASK-443)', () => {
expect(css).toMatch(/--v2-status-live:\s*var\(--v2-accent\)/);
expect(ruleBody(css, '.v2-board__priority--p2')).toContain('color: var(--v2-prio-p2-fg)');
});
test('blocked is red with a thin edge on blocked cards only', () => {
test('blocked shows through the column dot and P0 badge, not a card rail', () => {
expect(css).toMatch(/--v2-status-blocked:\s*#d92d20/);
expect(ruleBody(css, '.v2-board__card--blocked')).toContain('box-shadow: inset 3px 0 0 var(--v2-status-blocked-edge)');
expect(css).not.toContain('--v2-status-blocked-edge');
expect(css).not.toMatch(/\.v2-board__card--blocked\s*[,{]/);
expect(ruleBody(css, '.v2-board__col--blocked .v2-board__col-name')).toContain('color: var(--v2-status-blocked)');
});
// D225: a status rail down the side of a card reads as generated UI. A card is
// told apart by its column and badge, never by an inset side shadow or a
// coloured border-left. Quote and thread rails are typographic and exempt.
test('no card selector draws a status rail (inset side shadow or coloured border-left >= 2px)', () => {
const offenders: string[] = [];
// Strip comments first: a comment before a rule would otherwise join its selector.
const bare = css.replace(/\/\*[\s\S]*?\*\//g, '');
for (const match of bare.matchAll(/([^{}@]+)\{([^{}]*)\}/g)) {
const selector = match[1].trim();
const body = match[2];
if (!/card/i.test(selector) || /quote|thread/i.test(selector)) continue;
const insetRail = /box-shadow:[^;]*\binset\s+-?[1-9]\d*(?:\.\d+)?px\s+0(?:px)?\s+0/.test(body)
|| /box-shadow:[^;]*\binset\s+0(?:px)?\s+-?[1-9]\d*(?:\.\d+)?px\s+0(?:px)?\s+0/.test(body);
const leftBorder = /border-(?:left|inline-start)(?:-width)?:\s*([2-9]|\d{2,})(?:\.\d+)?px/.exec(body);
const leftColoured = leftBorder && !/border-(?:left|inline-start)(?:-color)?:[^;]*(transparent|none)/.test(body);
if (insetRail || leftColoured) offenders.push(selector);
}
expect(offenders).toEqual([]);
});
test('live and expired ownership retain distinct dots', () => {
expect(ruleBody(css, '.v2-board__owner-dot--live')).toContain('background: var(--v2-status-live)');
const expired = ruleBody(css, '.v2-board__owner-dot--expired');
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/v2/v2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ body.modern-ui.v2-canvas {
--v2-status-idle: var(--v2-border-strong);
--v2-status-pending: #667085;
--v2-status-blocked: #d92d20;
--v2-status-blocked-edge: #d92d20;

/* Agent role colors */
--v2-pink: #f472b6;
Expand Down Expand Up @@ -274,7 +273,6 @@ body.modern-ui.v2-canvas {
--v2-prio-p2-fg: #8b94a5;
--v2-status-pending: #7c8696;
--v2-status-blocked: #f97066;
--v2-status-blocked-edge: #f97066;
--v2-text-primary: #e8ebf1;
--v2-message-text: #e8ebf1;
--v2-rail-icon: #5f6979;
Expand Down Expand Up @@ -348,7 +346,6 @@ body.modern-ui.v2-canvas {
--v2-prio-p2-fg: #8b94a5;
--v2-status-pending: #7c8696;
--v2-status-blocked: #f97066;
--v2-status-blocked-edge: #f97066;
--v2-text-primary: #e8ebf1;
--v2-message-text: #e8ebf1;
--v2-rail-icon: #5f6979;
Expand Down Expand Up @@ -13804,7 +13801,6 @@ details[open] > .v2-settings__summary > .v2-settings__icon:last-child { transfor
.v2-board__priority--p0 { background: var(--v2-prio-p0-bg); border-color: var(--v2-prio-p0-bg); color: var(--v2-prio-p0-fg); }
.v2-board__priority--p2 { color: var(--v2-prio-p2-fg); }
.v2-board__col--blocked .v2-board__col-name { color: var(--v2-status-blocked); }
.v2-board__card--blocked { box-shadow: inset 3px 0 0 var(--v2-status-blocked-edge); }
.v2-board__card-title { font-size: 14px; line-height: 20px; }
.v2-board__owner-line { display: flex; align-items: center; gap: 6px; font: 500 11px/16px var(--v2-font-mono); color: var(--v2-text-secondary); }
.v2-board__owner-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
Expand Down
Loading