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

fix(dashboard): consistent 1px sidebar divider across List, Chat, Mailbox

Browse Source 
List handle drops its persistent tinted band (transparent default) and its grip line goes 2px->1px; Mailbox divider line goes var(--space-xs)->1px var(--border). All three now show a single clean 1px static divider with the wider handle as an invisible hover-highlight hit-area (Chat's pattern).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-06-22 10:37:28 -07:00
parent f5b8d42e44
commit b679577fa0
3 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard/app/components/ListView.css
View File

@@ -439,21 +439,25 @@ Widen the split resize column so the task-list sidebar is easy to grab and drag
overflow: auto;
}
/*
FNXC:SidebarDivider 2026-06-23-01:45:
The List split divider must read identically to the Chat sidebar divider: a single 1px var(--border) line, with the wider var(--space-sm) handle track acting only as an invisible drag hit-area that tints on hover/focus. Previously the handle painted a persistent color-mix band across its full var(--space-sm) width plus a 2px ::after grip, so the List divider looked noticeably thicker than Chat's clean 1px line. Keep the drag hit-area width (var(--space-sm) grid track) for usability; only the visible line thickness/color changes — handle background is transparent and the centered ::after line is 1px var(--border).
*/
.list-split-resize-handle {
position: relative;
cursor: col-resize;
background: color-mix(in srgb, var(--border) 70%, transparent);
background: transparent;
transition: background var(--transition-fast);
touch-action: none;
}
/* Centered grip line so the drag affordance is visible. */
/* Centered 1px grip line — the static visible divider, matching Chat's 1px sidebar border. */
.list-split-resize-handle::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 50%;
width: 2px;
width: 1px;
transform: translateX(-50%);
background: var(--border);
transition: background var(--transition-fast);

7
packages/dashboard/app/components/MailboxModal.css
View File

@@ -681,6 +681,9 @@ FN-6912 requires the full-page Messages divider to read thinner between the mess
/*
FNXC:Mailbox 2026-06-22-18:20:
The mailbox resize divider mirrors the Chat sidebar divider exactly — handle hit area var(--space-sm), centered visible line var(--space-xs), transparent until hover — so the two views' dividers read identically (the widths were previously swapped + the mailbox handle had an always-on background).
FNXC:SidebarDivider 2026-06-23-01:45:
Tighten the mailbox divider's static visible line to a single 1px var(--border) line so it matches Chat/List exactly (previously the centered ::before was var(--space-xs)=4px wide and had no static color, reading inconsistently next to the panes' own borders). The handle hit-area stays var(--space-sm) (invisible drag target); only the visible centered line changes — 1px var(--border) by default, tinting to var(--todo) on hover/active. Focus ring preserved.
*/
.mailbox-view .mailbox-split-resize-handle {
position: relative;
@@ -699,8 +702,10 @@ The mailbox resize divider mirrors the Chat sidebar divider exactly — handle h
top: 0;
bottom: 0;
left: 50%;
width: var(--space-xs);
width: var(--btn-border-width);
transform: translateX(-50%);
background: var(--border);
transition: background var(--transition-fast);
}
.mailbox-view .mailbox-split-resize-handle:hover::before,

6
packages/dashboard/app/components/__tests__/MailboxView.test.tsx
View File

@@ -1884,14 +1884,16 @@ describe("MailboxView", () => {
const resizeHandleBlockMatch = css.match(/\.mailbox-view\s+\.mailbox-split-resize-handle\s*\{([^}]*)\}/);
expect(resizeHandleBlockMatch).toBeTruthy();
const resizeHandleBlock = resizeHandleBlockMatch![1];
// FNXC:Mailbox 2026-06-22-18:20: handle mirrors the Chat sidebar divider — hit area var(--space-sm), transparent until hover, centered var(--space-xs) line.
// FNXC:SidebarDivider 2026-06-23-01:45: handle mirrors the Chat sidebar divider — hit area var(--space-sm), transparent handle background, centered static 1px var(--border) line (tightened from var(--space-xs)) so List/Chat/Mailbox dividers read identically.
expect(resizeHandleBlock).toContain("width: var(--space-sm);");
expect(resizeHandleBlock).toContain("cursor: col-resize;");
expect(resizeHandleBlock).toContain("background: transparent;");
const resizeHandleTargetBlockMatch = css.match(/\.mailbox-view\s+\.mailbox-split-resize-handle::before\s*\{([^}]*)\}/);
expect(resizeHandleTargetBlockMatch).toBeTruthy();
expect(resizeHandleTargetBlockMatch![1]).toContain("width: var(--space-xs);");
// Static visible divider is a single 1px var(--border) line, matching Chat's sidebar border.
expect(resizeHandleTargetBlockMatch![1]).toContain("width: var(--btn-border-width);");
expect(resizeHandleTargetBlockMatch![1]).toContain("background: var(--border);");
expect(css).toMatch(/\.mailbox-view\s+\.mailbox-split-resize-handle:hover::before,\s*\n\.mailbox-view\s+\.mailbox-split-resize-handle:active::before\s*\{[^}]*background:\s*color-mix\(in srgb,\s*var\(--todo\)\s*35%,\s*transparent\);[^}]*\}/);
const splitEmptyBlockMatch = css.match(/\.mailbox-view\s+\.mailbox-split-empty\s*\{([^}]*)\}/);