From d0bbca4fa9bf3645dbb1da6edeeaf1ed73bd8de3 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Fri, 12 Jun 2026 18:34:46 -0700
Subject: [PATCH] FN-6309: remove Chat active edge highlights

Refine Chat active-state styling by dropping edge highlights while preserving active tints.

- Remove the scope-tab active bottom underline shadow.
- Remove the active chat-row left border and compensating padding offset.
- Add CSS contract coverage to prevent the removed desktop and mobile highlights from returning.

Files changed:
 packages/dashboard/app/components/ChatView.css     |  3 --
 .../app/components/__tests__/ChatView.test.tsx     | 47 ++++++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-6309
Fusion-Task-Lineage: e6645f38-a77c-4426-900b-71334d2145a9
---
 .../dashboard/app/components/ChatView.css     |  3 --
 .../components/__tests__/ChatView.test.tsx    | 47 +++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css
index bb6570fa80..4e8b0c9ed5 100644
--- a/packages/dashboard/app/components/ChatView.css
+++ b/packages/dashboard/app/components/ChatView.css
@@ -86,7 +86,6 @@
 .chat-sidebar-scope-btn--active {
   background: var(--card);
   color: var(--text);
-  box-shadow: inset 0 calc(var(--btn-border-width) * -2) 0 var(--todo);
 }
 
 .chat-sidebar-rooms {
@@ -268,8 +267,6 @@
 }
 
 .chat-session-item--active {
-  border-left: calc(var(--btn-border-width) * 3) solid var(--todo);
-  padding-left: calc(var(--space-md) - (var(--btn-border-width) * 3));
   background: color-mix(in srgb, var(--todo) 12%, transparent);
 }
 
diff --git a/packages/dashboard/app/components/__tests__/ChatView.test.tsx b/packages/dashboard/app/components/__tests__/ChatView.test.tsx
index ec7db73740..34d47fcbfa 100644
--- a/packages/dashboard/app/components/__tests__/ChatView.test.tsx
+++ b/packages/dashboard/app/components/__tests__/ChatView.test.tsx
@@ -2831,6 +2831,53 @@ describe("ChatView CSS — failure bubble contracts", () => {
   });
 });
 
+describe("ChatView CSS — active state edge highlights", () => {
+  const css = loadAllAppCss();
+
+  function findRule(selector: string): string {
+    const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const match = css.match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`));
+    expect(match).toBeTruthy();
+    return match?.[1] ?? "";
+  }
+
+  function mobileRuleContains(selector: string, propertyPattern: RegExp): boolean {
+    const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const mobileRegex = /@media[^{}]*\(max-width:\s*768px\)[^{]*\{([\s\S]*?)\n\}/g;
+    let match;
+    while ((match = mobileRegex.exec(css)) !== null) {
+      const ruleMatch = match[1].match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`));
+      if (ruleMatch && propertyPattern.test(ruleMatch[1])) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  it("keeps scope-tab active tint without the removed bottom underline", async () => {
+    const activeScopeRule = findRule(".chat-sidebar-scope-btn--active");
+
+    expect(activeScopeRule).toContain("background: var(--card)");
+    expect(activeScopeRule).toContain("color: var(--text)");
+    expect(activeScopeRule).not.toContain("box-shadow");
+    expect(activeScopeRule).not.toContain("inset");
+  });
+
+  it("keeps active chat-row background without the removed left edge or offset", async () => {
+    const activeSessionRule = findRule(".chat-session-item--active");
+
+    expect(activeSessionRule).toContain("background: color-mix(in srgb, var(--todo) 12%, transparent)");
+    expect(activeSessionRule).not.toContain("border-left");
+    expect(activeSessionRule).not.toContain("padding-left: calc(var(--space-md) - (var(--btn-border-width) * 3))");
+  });
+
+  it("does not reintroduce either removed highlight in mobile rules", async () => {
+    expect(mobileRuleContains(".chat-sidebar-scope-btn--active", /box-shadow\s*:\s*inset/)).toBe(false);
+    expect(mobileRuleContains(".chat-session-item--active", /border-left\s*:/)).toBe(false);
+    expect(mobileRuleContains(".chat-session-item--active", /padding-left\s*:\s*calc\(var\(--space-md\)\s*-\s*\(var\(--btn-border-width\)\s*\*\s*3\)\)/)).toBe(false);
+  });
+});
+
 describe("FN-3911 chat session list layout", () => {
   const css = loadAllAppCss();