From 901ca72efd2dd0eb55fbcbac351f1817af16ede4 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Mon, 22 Jun 2026 00:24:28 -0700
Subject: [PATCH] FN-6912: slim the messages split pane divider

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
---
 packages/dashboard/app/components/MailboxModal.css   |  8 ++++++--
 .../app/components/__tests__/MailboxView.test.tsx    | 12 +++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/app/components/MailboxModal.css b/packages/dashboard/app/components/MailboxModal.css
index 3e5c00e05f..02b220a7e1 100644
--- a/packages/dashboard/app/components/MailboxModal.css
+++ b/packages/dashboard/app/components/MailboxModal.css
@@ -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%);
 }
 
diff --git a/packages/dashboard/app/components/__tests__/MailboxView.test.tsx b/packages/dashboard/app/components/__tests__/MailboxView.test.tsx
index eb8bbe1150..ebcdac7963 100644
--- a/packages/dashboard/app/components/__tests__/MailboxView.test.tsx
+++ b/packages/dashboard/app/components/__tests__/MailboxView.test.tsx
@@ -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();