From b15fd2b498b57f5354343ca8fc457e3715f7bd67 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 23 Jul 2026 17:43:27 -0700 Subject: [PATCH] fix(dashboard): stack mobile Add comment above Refine/Proceed Phone no longer pins Add comment under the action rail as a fixed bar. It uses the same full-width in-flow footer row as tablet, above Refine and Proceed. The composer stays fixed when open. --- .../app/components/PlanningModeModal.css | 42 ++++--------------- .../app/components/PlanningModeModal.tsx | 16 +++---- .../__tests__/PlanningModeModal.css.test.ts | 14 +++---- ...PlanningModeModal.ui-interactions.test.tsx | 2 +- .../__tests__/planning-browser-e2e.test.ts | 28 ++++++------- 5 files changed, 35 insertions(+), 67 deletions(-) diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css index 88d7c77810..fd1e8bde7c 100644 --- a/packages/dashboard/app/components/PlanningModeModal.css +++ b/packages/dashboard/app/components/PlanningModeModal.css @@ -1799,9 +1799,10 @@ FNXC:PlanningComments 2026-07-23-17:05: Desktop (≥1025px) keeps the in-document trigger under the plan markdown. Tablet and phone (≤1024px) use the action-rail counterpart so selection comments are not lost under the plan fold. -FNXC:PlanningComments 2026-07-24-05:35: -Tablet (769–1024) places that rail control as a full-width row above Refine/Proceed. Phone -(≤768) still lifts it into a fixed bottom bar above the mobile nav. +FNXC:PlanningComments 2026-07-24-05:50: +Phone and tablet both place that rail control as a full-width row above Refine/Proceed. A +viewport-fixed bar above the mobile nav sat under the action buttons and required an awkward +reach past Proceed — match the tablet in-flow stack on phone too. */ .planning-comment-quote, @@ -1913,42 +1914,15 @@ plan actions, and a token-sized bottom inset keep all three controls inline with */ @media (max-width: 768px) { /* - FNXC:PlanningComments 2026-07-23-17:05: - On phone, pin the rail Add-comment control to the visual viewport above the mobile nav so a - touch selection never requires scrolling the plan document or footer. Tablet (769–1024) keeps - the in-flow full-width rail row from the 1024px block instead. - - The plan-actions button rule forces width 100 percent. With position fixed that 100 percent is - the viewport width, and combined with left/right insets the control overflowed past the right - edge (measured 780px wide in a 768px viewport). Higher specificity + width auto lets left/right - define the used width so the bar stays fully on-screen. + FNXC:PlanningComments 2026-07-24-05:50: + Phone keeps the ≤1024 in-flow full-width Add-comment row above Refine/Proceed (no fixed bar + under the action rail). The composer still pins above the mobile nav so opening it after a mid- + document selection does not require scrolling to the plan foot. */ - .planning-plan-actions .btn.planning-add-comment--mobile { - position: fixed; - left: var(--space-md); - right: var(--space-md); - bottom: calc( - var(--mobile-nav-height, 44px) - + max(env(safe-area-inset-bottom, 0px), 12px) - + var(--space-md) - ); - z-index: var(--z-popover); - width: auto; - max-width: none; - box-shadow: var(--shadow-md); - } - .planning-comment-tray li { grid-template-columns: minmax(0, 1fr) auto; } - /* - FNXC:PlanningComments 2026-07-23-17:05: - The comment composer used to flow at the end of the plan markdown, so opening it after a mid- - document selection required scrolling to the document foot. Pin it to the visual viewport above - the mobile nav/safe-area (and above the selection trigger slot) so Cancel / Add comment stay - reachable without scrolling. - */ .planning-comment-editor { position: fixed; left: var(--space-md); diff --git a/packages/dashboard/app/components/PlanningModeModal.tsx b/packages/dashboard/app/components/PlanningModeModal.tsx index faf98ad80c..3e1f6a8420 100644 --- a/packages/dashboard/app/components/PlanningModeModal.tsx +++ b/packages/dashboard/app/components/PlanningModeModal.tsx @@ -3154,16 +3154,12 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat FN-8533 keeps the selection-adjacent control on wide desktop, but compact shells need a counterpart that cannot be lost under the document fold. - FNXC:PlanningComments 2026-07-23-17:05: - On ≤768px the rail trigger is position:fixed above the mobile nav so a selection never - requires scrolling. - - FNXC:PlanningComments 2026-07-24-05:35: - On tablet (769–1024) the same rail control stays in the plan action footer as a full-width - row above Refine/Proceed. 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:50: + On tablet and phone (≤1024) the rail control stays in the plan action footer as a + full-width row above Refine/Proceed so a selection never requires scrolling past the + 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. */} {selectedPlanQuote && !isCommentEditorOpen && (