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:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user