diff --git a/packages/dashboard/app/components/ListView.css b/packages/dashboard/app/components/ListView.css index 327375c272..da1a8c1840 100644 --- a/packages/dashboard/app/components/ListView.css +++ b/packages/dashboard/app/components/ListView.css @@ -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); diff --git a/packages/dashboard/app/components/MailboxModal.css b/packages/dashboard/app/components/MailboxModal.css index 1ae0cadc1e..cefec5320f 100644 --- a/packages/dashboard/app/components/MailboxModal.css +++ b/packages/dashboard/app/components/MailboxModal.css @@ -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, diff --git a/packages/dashboard/app/components/__tests__/MailboxView.test.tsx b/packages/dashboard/app/components/__tests__/MailboxView.test.tsx index 43be43816b..f2fb613c9d 100644 --- a/packages/dashboard/app/components/__tests__/MailboxView.test.tsx +++ b/packages/dashboard/app/components/__tests__/MailboxView.test.tsx @@ -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*\{([^}]*)\}/);