From 28e2cd587c577ec8abcd9143ba523cb268b40cf1 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 23 Jul 2026 17:36:10 -0700 Subject: [PATCH] fix(dashboard): put plan-review Add comment above actions on tablet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tablet (≤1024px) now uses the action-rail Add-comment control as a full-width row above Refine/Proceed instead of the document-end trigger. Phone keeps the fixed bar above the mobile nav; desktop keeps the in-document control. --- .../app/components/PlanningModeModal.css | 60 ++++++++++--------- .../app/components/PlanningModeModal.tsx | 25 +++++--- .../__tests__/PlanningModeModal.css.test.ts | 11 ++-- ...PlanningModeModal.ui-interactions.test.tsx | 5 +- .../__tests__/planning-browser-e2e.test.ts | 46 +++++++------- 5 files changed, 84 insertions(+), 63 deletions(-) diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css index f20ecd3acb..88d7c77810 100644 --- a/packages/dashboard/app/components/PlanningModeModal.css +++ b/packages/dashboard/app/components/PlanningModeModal.css @@ -1796,9 +1796,12 @@ its established Refine and Proceed action hierarchy. /* FNXC:PlanningComments 2026-07-23-17:05: -Desktop (≥769px) keeps the in-document trigger under the plan markdown. Mobile (≤768px) lifts -the counterpart into a fixed bottom bar in the visual viewport so it never requires scrolling -the plan document or action rail after a touch selection. +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. */ .planning-comment-quote, @@ -1874,6 +1877,24 @@ the plan document or action rail after a touch selection. grid-column: 1 / -1; } + /* + FNXC:PlanningComments 2026-07-24-05:35: + Tablet and phone hide the document-adjacent trigger (it sits at the end of a long plan and + requires scrolling). The action-rail variant becomes the sole control and spans the full + footer width above Refine/Proceed so a selection always exposes Add comment without leaving + the plan action baseline. + */ + .planning-add-comment--document { + display: none; + } + + .planning-plan-actions .btn.planning-add-comment--mobile { + display: flex; + grid-column: 1 / -1; + margin-top: 0; + justify-content: center; + } + .planning-refine-menu { right: var(--space-lg); left: var(--space-lg); @@ -1892,34 +1913,17 @@ plan actions, and a token-sized bottom inset keep all three controls inline with */ @media (max-width: 768px) { /* - FNXC:PlanningComments 2026-07-31-00:00: - A selected quote needs a reachable mobile action, not a control lost in the scrollable - document. At 769px and above the selection-adjacent document trigger stays canonical. - FNXC:PlanningComments 2026-07-23-17:05: - The mobile trigger is position:fixed to the selection midpoint and clamped into the visual - viewport (including safe-area + mobile-nav clearance) so it always appears after a selection - and can be dismissed by selectionchange when the selection collapses — without scrolling the - screen. These established 768px/1024px media boundaries are permitted; new dimensions use only - existing design tokens. - */ - .planning-add-comment--document { - display: none; - } + 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. - /* - FNXC:PlanningComments 2026-07-23-17:05: - Pin the mobile Add-comment control to the visual viewport above the mobile nav/safe-area. - A fixed bar appears immediately after selectionchange and dismisses when the selection - collapses — no document or action-rail scroll required. - - The mobile 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). Use a higher-specificity selector and - width auto so left+right define the used width and the bar stays fully on-screen. + 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. */ .planning-plan-actions .btn.planning-add-comment--mobile { - display: flex; position: fixed; left: var(--space-md); right: var(--space-md); @@ -1931,8 +1935,6 @@ plan actions, and a token-sized bottom inset keep all three controls inline with z-index: var(--z-popover); width: auto; max-width: none; - margin-top: 0; - justify-content: center; box-shadow: var(--shadow-md); } diff --git a/packages/dashboard/app/components/PlanningModeModal.tsx b/packages/dashboard/app/components/PlanningModeModal.tsx index b3546a402f..c3051ed898 100644 --- a/packages/dashboard/app/components/PlanningModeModal.tsx +++ b/packages/dashboard/app/components/PlanningModeModal.tsx @@ -692,8 +692,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat }, []); const focusAddCommentTrigger = useCallback(() => { - const isMobileViewport = window.matchMedia?.("(max-width: 768px)").matches ?? false; - (isMobileViewport ? mobileAddCommentTriggerRef : addCommentTriggerRef).current?.focus(); + /* + FNXC:PlanningComments 2026-07-24-05:35: + Tablet and phone both expose the action-rail trigger; only wide desktop uses the document + variant. Match the 1024px CSS gate so focus restore lands on the visible control. + */ + const usesRailTrigger = window.matchMedia?.("(max-width: 1024px)").matches ?? false; + (usesRailTrigger ? mobileAddCommentTriggerRef : addCommentTriggerRef).current?.focus(); }, []); /* @@ -3053,15 +3058,19 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
{/* FNXC:PlanningComments 2026-07-31-00:00: - FN-8533 keeps the selection-adjacent control at 769px and wider, but mobile needs a + 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 mobile trigger is position:fixed to the visual viewport above the mobile - nav so it appears immediately after a selection without scrolling, and document-level - selectionchange dismisses it when the selection collapses. CSS still shows exactly one - of the two variants; only established 768px/1024px breakpoint literals are allowed here, - while all other dimensions remain design-token based. + 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. */} {selectedPlanQuote && !isCommentEditorOpen && (