root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FN-7870: remove left accent stripe and row border from Todo sidebar list items

Browse Source 
Flattens the Todo sidebar list rows so active/hover states read through background and text color only, without per-row borders or the active-row left accent stripe.
- Removed `border: 1px solid transparent` and hover `border-color` from `.todo-list-item`
- Added hover text color instead of hover border to keep hover state visible
- Removed the `border-color` and inset box-shadow accent stripe from `.todo-list-item--active`
- Added a CSS contract test asserting sidebar list rows stay flat (no left accent stripe, no per-row borders)

Files changed:
 packages/dashboard/app/components/TodoView.css        |  9 +++++----
 .../components/__tests__/TodoView.mobile-css.test.ts  | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

Fusion-Task-Id: FN-7870

Fusion-Task-Lineage: 78db20c0-7e53-427c-95da-7c9d5fa828d7

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-12 12:33:29 -07:00
parent 8884f50765
commit 09e8e71680
2 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/dashboard/app/components/TodoView.css
View File

@@ -462,24 +462,25 @@ Redesign Todos to fit the rest of the dashboard theme: full-height tokenized wor
gap: var(--space-sm);
}
/*
FNXC:TodosStyling 2026-07-12-00:00:
FN-7870 removes the active-row left accent stripe and per-row border boxing so Todo sidebar list rows read as a flat, quiet stack. Active and hover states remain visible through background and text color only.
*/
.todo-list-item {
min-height: 42px;
padding: var(--space-sm);
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--text-muted);
}
.todo-list-item:hover {
background: var(--card-hover);
border-color: color-mix(in srgb, var(--border) 70%, transparent);
color: var(--text);
}
.todo-list-item--active {
background: color-mix(in srgb, var(--todo) 10%, var(--surface));
border-color: color-mix(in srgb, var(--todo) 32%, var(--border));
color: var(--text);
box-shadow: inset 3px 0 0 var(--todo);
}
.todo-list-select-btn {

19
packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts
View File

@@ -1,6 +1,9 @@
import { describe, expect, it } from "vitest";
import { loadAllAppCss, loadAllAppCssBaseOnly } from "../../test/cssFixture";
const selectorBlocks = (css: string, selectorFragment: string): string[] =>
Array.from(css.matchAll(/[^{}]*\{[^{}]*\}/g), ([block]) => block).filter((block) => block.includes(selectorFragment));
describe("TodoView mobile stack height CSS contract", () => {
it("uncaps both visible panels in the narrow single-panel stack", () => {
const css = loadAllAppCss();
@@ -45,3 +48,19 @@ describe("TodoView action row CSS contract", () => {
expect(css).toMatch(/@media \(max-width:\s*768px\)[^{]*\{[\s\S]*\.todo-item-actions\s*\{[^}]*opacity:\s*1;[^}]*\}/);
});
});
describe("TodoView list row CSS contract", () => {
it("keeps sidebar list rows flat without a left accent stripe", () => {
const css = loadAllAppCss();
const listItemBlocks = selectorBlocks(css, ".todo-list-item");
const activeBlocks = selectorBlocks(css, ".todo-list-item--active");
expect(listItemBlocks.length).toBeGreaterThan(0);
expect(activeBlocks.length).toBeGreaterThan(0);
expect(activeBlocks.join("\n")).not.toMatch(/inset\s+3px\s+0\s+0/);
expect(listItemBlocks.join("\n")).not.toMatch(/border-left\s*:/);
expect(css).not.toMatch(/\.todo-list-item\s*\{[^}]*border\s*:/);
expect(css).not.toMatch(/\.todo-list-item:hover\s*\{[^}]*border-color\s*:/);
expect(activeBlocks.join("\n")).toMatch(/background\s*:/);
});
});