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)}
>
-
+ {/* FNXC:PlanningComments 2026-07-24-05:55: Match New-session / mobile rail glyph scale. */}
+
{t("planning.addComment", "Add comment to selection")}
)}
@@ -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 && (
)}
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*;/);