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

FN-6912: slim the messages split pane divider

Browse Source 
Slim the full-page Messages split-pane divider without reducing its interactive resize target.

- Reduce the visible mailbox split resize handle from space-sm to space-xs.
- Keep the pseudo-element hit target at space-sm for hover, active, and drag affordances.
- Extend MailboxView CSS coverage to assert the thinner handle and preserved target width.

Files changed:
 packages/dashboard/app/components/MailboxModal.css           |  8 ++++++--
 .../dashboard/app/components/__tests__/MailboxView.test.tsx  | 12 +++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-6912

Fusion-Task-Lineage: c5fccc5f-56b2-4188-8c27-51ed3b269f86
This commit is contained in:
gsxdsm
2026-06-22 00:24:28 -07:00
parent 108d9f6dca
commit 901ca72efd
2 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -669,9 +669,13 @@
min-height: 0;
}
/*
FNXC:DashboardStyling 2026-06-21-23:40:
FN-6912 requires the full-page Messages divider to read thinner between the message list and detail panes while preserving resize discoverability. Keep the visible handle narrow, but leave the hover/active pseudo-element wider so the drag and focus affordances do not become an un-grabbable sliver.
*/
.mailbox-view .mailbox-split-resize-handle {
position: relative;
width: var(--space-sm);
width: var(--space-xs);
flex-shrink: 0;
cursor: col-resize;
background: color-mix(in srgb, var(--border) 70%, transparent);
@@ -685,7 +689,7 @@
top: 0;
bottom: 0;
left: 50%;
width: var(--space-xs);
width: var(--space-sm);
transform: translateX(-50%);
}

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

@@ -1868,7 +1868,17 @@ describe("MailboxView", () => {
expect(splitPaneBlock).toContain("border: var(--btn-border-width) solid var(--border);");
expect(splitPaneBlock).toContain("background: var(--surface);");
expect(css).toMatch(/\.mailbox-view\s+\.mailbox-split-resize-handle\s*\{[^}]*cursor:\s*col-resize;[^}]*background:\s*color-mix\(in srgb,\s*var\(--border\)\s*70%,\s*transparent\);[^}]*\}/);
const resizeHandleBlockMatch = css.match(/\.mailbox-view\s+\.mailbox-split-resize-handle\s*\{([^}]*)\}/);
expect(resizeHandleBlockMatch).toBeTruthy();
const resizeHandleBlock = resizeHandleBlockMatch![1];
expect(resizeHandleBlock).toContain("width: var(--space-xs);");
expect(resizeHandleBlock).toContain("cursor: col-resize;");
expect(resizeHandleBlock).toContain("background: color-mix(in srgb, var(--border) 70%, transparent);");
const resizeHandleTargetBlockMatch = css.match(/\.mailbox-view\s+\.mailbox-split-resize-handle::before\s*\{([^}]*)\}/);
expect(resizeHandleTargetBlockMatch).toBeTruthy();
expect(resizeHandleTargetBlockMatch![1]).toContain("width: var(--space-sm);");
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*\{([^}]*)\}/);
expect(splitEmptyBlockMatch).toBeTruthy();