From f8e6fd5e2b5652d6fc9b46ecac724872dd101c5e Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Thu, 23 Jul 2026 17:49:53 -0700
Subject: [PATCH] fix(dashboard): stack tablet Add comment above actions with
 mobile icon

Tablet plan-actions no longer use flex nowrap (which put Add comment beside
Refine/Proceed). Keep the two-column grid so the selection control is a
full-width first row, and pin MessageSquarePlus to the same 16px/token size
as mobile.
---
 .../app/components/PlanningModeModal.css      | 45 ++++++++++++++++++-
 .../app/components/PlanningModeModal.tsx      |  9 +++-
 .../__tests__/PlanningModeModal.css.test.ts   |  8 +++-
 3 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css
index fd1e8bde7c..7d84477ac6 100644
--- a/packages/dashboard/app/components/PlanningModeModal.css
+++ b/packages/dashboard/app/components/PlanningModeModal.css
@@ -1894,6 +1894,19 @@ reach past Proceed — match the tablet in-flow stack on phone too.
     grid-column: 1 / -1;
     margin-top: 0;
     justify-content: center;
+    gap: var(--space-sm);
+  }
+
+  /*
+  FNXC:PlanningComments 2026-07-24-05:55:
+  Pin the MessageSquarePlus glyph to the same token size used by other compact rail CTAs so
+  tablet and phone share the mobile icon scale (default lucide size can dwarf the label in the
+  full-width rail row).
+  */
+  .planning-plan-actions .btn.planning-add-comment--mobile svg {
+    width: var(--space-lg);
+    height: var(--space-lg);
+    flex-shrink: 0;
   }
 
   .planning-refine-menu {
@@ -2008,11 +2021,39 @@ plan actions, and a token-sized bottom inset keep all three controls inline with
     min-height: calc(var(--space-2xl) + var(--space-md));
   }
 
+  /*
+  FNXC:PlanningModeTablet 2026-07-20-21:50:
+  Refine/Proceed share one compact baseline on tablet.
+
+  FNXC:PlanningComments 2026-07-24-05:55:
+  Do not force flex nowrap on the plan action rail: that pulled Add comment into the same row
+  as Refine/Proceed. Keep the ≤1024 two-column grid so the selection control stays a full-width
+  first row (grid-column 1 / -1) with Refine | Proceed on the second row — same stack as phone.
+  */
   .planning-plan-actions {
-    display: flex;
-    flex-wrap: nowrap;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--space-md);
   }
+
+  .planning-plan-actions .btn.planning-add-comment--mobile {
+    display: flex;
+    grid-column: 1 / -1;
+    width: 100%;
+    margin-top: 0;
+    justify-content: center;
+    gap: var(--space-sm);
+  }
+
+  .planning-plan-actions .btn.planning-add-comment--mobile svg {
+    width: var(--space-lg);
+    height: var(--space-lg);
+    flex-shrink: 0;
+  }
+
+  .planning-comment-tray {
+    grid-column: 1 / -1;
+  }
 }
 
 /* Loading State */
diff --git a/packages/dashboard/app/components/PlanningModeModal.tsx b/packages/dashboard/app/components/PlanningModeModal.tsx
index 3e1f6a8420..77657168f3 100644
--- a/packages/dashboard/app/components/PlanningModeModal.tsx
+++ b/packages/dashboard/app/components/PlanningModeModal.tsx
@@ -3129,7 +3129,8 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => setCommentEditorOpen(true)}
             >
-              <MessageSquarePlus />
+              {/* FNXC:PlanningComments 2026-07-24-05:55: Match New-session / mobile rail glyph scale. */}
+              <MessageSquarePlus size={16} aria-hidden="true" />
               {t("planning.addComment", "Add comment to selection")}
             </button>
           )}
@@ -3160,6 +3161,10 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
         action baseline. Document-level selectionchange still dismisses it when the selection
         collapses. CSS shows exactly one of the two variants; only established 768px/1024px
         breakpoint literals are allowed here, while all other dimensions remain design-token based.
+
+        FNXC:PlanningComments 2026-07-24-05:55:
+        Tablet must keep the two-column grid (not flex nowrap) so Add comment stays a full-width
+        first row with the same MessageSquarePlus 16px glyph as phone.
         */}
         {selectedPlanQuote && !isCommentEditorOpen && (
           <button
@@ -3169,7 +3174,7 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
             onMouseDown={(event) => event.preventDefault()}
             onClick={() => setCommentEditorOpen(true)}
           >
-            <MessageSquarePlus />
+            <MessageSquarePlus size={16} aria-hidden="true" />
             {t("planning.addComment", "Add comment to selection")}
           </button>
         )}
diff --git a/packages/dashboard/app/components/__tests__/PlanningModeModal.css.test.ts b/packages/dashboard/app/components/__tests__/PlanningModeModal.css.test.ts
index 0bd354256a..5fa582a4ef 100644
--- a/packages/dashboard/app/components/__tests__/PlanningModeModal.css.test.ts
+++ b/packages/dashboard/app/components/__tests__/PlanningModeModal.css.test.ts
@@ -162,8 +162,11 @@ describe("PlanningModeModal CSS responsive action contract", () => {
     expect(sharedButtonRule).toMatch(/flex\s*:\s*1 1 0\s*;/);
     expect(sharedButtonRule).toMatch(/min-width\s*:\s*0\s*;/);
     expect(sharedButtonRule).toMatch(/min-height\s*:\s*calc\(var\(--space-2xl\) \+ var\(--space-md\)\)\s*;/);
-    expectSomeRule(tabletCss, ".planning-plan-actions", /display\s*:\s*flex\s*;/);
-    expectSomeRule(tabletCss, ".planning-plan-actions", /flex-wrap\s*:\s*nowrap\s*;/);
+    // FNXC:PlanningComments 2026-07-24-05:55: tablet keeps the 2-col grid so Add comment can span above Refine/Proceed.
+    expectSomeRule(tabletCss, ".planning-plan-actions", /display\s*:\s*grid\s*;/);
+    expectSomeRule(tabletCss, ".planning-plan-actions", /grid-template-columns\s*:\s*repeat\(2, minmax\(0, 1fr\)\)\s*;/);
+    expect(findRule(tabletCss, ".planning-plan-actions .btn.planning-add-comment--mobile")).toMatch(/grid-column\s*:\s*1\s*\/\s*-1\s*;/);
+    expect(findRule(tabletCss, ".planning-plan-actions .btn.planning-add-comment--mobile svg")).toMatch(/width\s*:\s*var\(--space-lg\)\s*;/);
   });
 
   it("shows exactly one contextual comment trigger in the tablet/phone plan action rail", () => {
@@ -178,6 +181,7 @@ describe("PlanningModeModal CSS responsive action contract", () => {
     expect(railTriggerRule).toMatch(/display\s*:\s*flex\s*;/);
     expect(railTriggerRule).toMatch(/grid-column\s*:\s*1\s*\/\s*-1\s*;/);
     expect(railTriggerRule).toMatch(/margin-top\s*:\s*0\s*;/);
+    expect(findRule(compactCss, ".planning-plan-actions .btn.planning-add-comment--mobile svg")).toMatch(/width\s*:\s*var\(--space-lg\)\s*;/);
     // FNXC:PlanningComments 2026-07-24-05:50: phone no longer overrides the rail trigger to fixed.
     expect(findRule(mobileCss, ".planning-plan-actions .btn.planning-add-comment--mobile")).toBeUndefined();
     expect(mobileEditorRule).toMatch(/position\s*:\s*fixed\s*;/);