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
This commit is contained in:
gsxdsm
2026-06-12 18:34:46 -07:00
parent 0a135c9367
commit d0bbca4fa9
2 changed files with 47 additions and 3 deletions

View File

@@ -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);
}

View File

@@ -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();