From 09e8e716803c9d997d1f3376ec3a94ceb95aa90d Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sun, 12 Jul 2026 12:33:29 -0700
Subject: [PATCH] FN-7870: remove left accent stripe and row border from Todo
 sidebar list items

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>
---
 .../dashboard/app/components/TodoView.css     |  9 +++++----
 .../__tests__/TodoView.mobile-css.test.ts     | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/app/components/TodoView.css b/packages/dashboard/app/components/TodoView.css
index bcebdae69b..bb6baddbf9 100644
--- a/packages/dashboard/app/components/TodoView.css
+++ b/packages/dashboard/app/components/TodoView.css
@@ -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 {
diff --git a/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts b/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts
index cbcd892435..26d80a3786 100644
--- a/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts
+++ b/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts
@@ -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*:/);
+  });
+});