The right-padding bug recurred three times because 'Task Detail modal' names ONE
surface with THREE shells and fixes kept landing in the wrong file. Disambiguate:
- Rename the just-introduced .floating-window--tablet marker to
.floating-window--tablet-viewport and document the naming contract next to it:
--tablet-viewport = viewport MODE classifies tablet (touch or not, styling
surface); --touch-geometry = tablet AND touch (enlarged 44px targets only).
- Add SHELL NAMING MAP breadcrumbs at the top of TaskDetailModal.css and
TerminalModal.css pointing inset/padding fixes at the FloatingWindow shell
that tablet popups and floating terminals actually render through.
Comment wording deliberately avoids dot-prefixed class tokens because
FloatingWindow.test.tsx scans raw CSS (comments included) with selector regexes.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Third recurrence of the Task Detail right-padding bug (FN-8630/FN-8634): those
fixes only covered the .modal-overlay shells, while every tablet task popup and
floating terminal renders through FloatingWindow, whose shared body carries
FN-8015's margin-inline-end scrollbar gutter — a 16px right border with a 0px
left one. Tablet-mode windows (.floating-window--tablet, keyed on viewport MODE
so non-touch tablet widths match too) now zero the gutter; touch never grabs
scrollbar thumbs, so the desktop hot-zone conflict FN-8015 solves cannot occur.
GitHub-import's detail panel, which used the gutter as its right inset,
compensates locally. Desktop keeps the FN-8015 contract.
Also per operator request: the floating terminal is draggable from the empty
strip space behind the tabs and anywhere in the top toolbar, not only the
FN-8633 grip. Tab presses keep stopPropagation (scoped to .terminal-tab) so
they never start a window drag; the tablet floating header supersedes the
pan-x contract with touch-action: none (an overflowing strip is replaced by
the mobile-tabs dropdown, so no visible strip pans horizontally).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The `.floating-window__body` resize-handle clearance gutter (FN-8015) was
carved out only for 769-1024px, so landscape iPads (1180-1366 CSS px) fell
through to the desktop contract and kept it — content stopped ~17px short of
the right edge while the left edge stayed flush.
Gate the carve-out on the input device instead of viewport width: the gutter
only protects resize hot zones a pointer can actually grab. `(pointer: coarse)`
is primary-input only, so a touchscreen laptop on a trackpad still reports
`fine` and keeps desktop clearance.
Measured at 1180px: header inset went from 1px/17px to 1px/1px.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The full-screen mobile task-detail sheet hides all resize handles, so
FN-8015's `margin-inline-end: var(--space-lg)` gutter on the shared
`.floating-window__body` (added to keep the scrollbar clear of desktop
resize hot zones) only added dead space on the right and shifted the
entire panel left. Zero it for `.floating-window--task-detail` inside
the mobile breakpoint so `.detail-body`'s own padding defines both
insets equally; desktop resize-handle clearance is untouched.
Refined the FN-8015 invariant test to enforce the desktop hot-zone gutter
media-aware (strips @media blocks) and added a regression guard for the
mobile zeroing.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The GitHub/GitLab import detail panel had no inset of its own, so it sat
flush against the window's left edge while FN-8015's resize gutter left a
gap on the right only — "Preview" was clipped and the whole header read as
misaligned on both the desktop window and the mobile sheet. Give the panel a
symmetric inset, letting that existing gutter supply the right side rather
than overriding it (which would push the inner scrollbar back into the
resize hot zone the gutter protects).
Also in the header: `space-between` spread three children apart and flung
"Close issue" into the middle, so the label now takes the free space and the
two actions stay grouped as a pair. Both actions size from one rule instead
of each inheriting its own .btn defaults, at a 40px touch target on mobile
where Import is the sheet's primary action. "Preview" becomes a muted
eyebrow matching the existing ISSUE #NNNN label.
Fix title truncation while here: `.floating-window__title` declared
text-overflow: ellipsis but was display:flex, which made the text an
anonymous flex item that text-overflow cannot act on, so titles hard-cut
mid-word. Every caller passes a plain string, so a block box makes the
existing declaration work as written.
Finally, the detail title bar kept the raw upstream title while the card
below showed the translation — one item displaying two different titles at
once. Both now read importTranslation.display.title, gated on activeTab to
match translateSelection so an item's number is never paired with the other
tab's title. The existing translation test now asserts both surfaces in both
directions; it fails without this change.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Restores reliable single-finger dragging of movable FloatingWindow headers on mobile by reasserting touch-action: none at the mobile breakpoint, and adds regression coverage for the touch drag path.
- Reassert touch-action: none on movable FloatingWindow headers within the mobile media query, excluding full-screen sheet variants (chat, task-detail, workflow-editor, automation, mission-interview, file-browser, pr-create, artifacts-gallery), so the drag-handle contract isn't overridden by the global pan-y lockdown on mobile.
- Add a test verifying the movable mobile drag-handle selector keeps touch-action: none alongside the other opted-out draggable selectors (right-dock-expand-modal header, terminal header).
- Add a test exercising the captured pointermove drag path (pointerdown/move/up with pointer capture) confirming the window repositions correctly on touch input.
- Add a patch changeset for @runfusion/fusion documenting the fix.
Files changed:
.changeset/fn-7873-mobile-modal-header-drag.md | 7 +++
packages/dashboard/app/components/FloatingWindow.css | 8 +++
packages/dashboard/app/components/__tests__/FloatingWindow.test.tsx | 59 ++++++++++++++++++++++
3 files changed, 74 insertions(+)
Fusion-Task-Id: FN-7873
Fusion-Task-Lineage: 96f2b199-549e-4cab-a42b-05946a7bae86
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Fixes ~19 deterministic dashboard test failures pre-existing on origin/main
(non-blocking full-suite lane). Mix of real product fixes and stale-test
reconciliation; no appeasement (no widened timeouts, skips, or weakened
assertions).
Product CSS fixes (real regressions the guards caught):
- Info toast contrast: shadcn-custom light theme had white-on-#0284c7 (4.10,
below WCAG AA 4.5); enrolled it in the light-mode dark-text correction.
- 27 undefined CSS token references (typos/foreign tokens) renamed to canonical
defined tokens; defined the genuinely-intended --border-strong and
--right-dock-min/max-width.
- Raw rgba() box-shadow fallback tokenized to color-mix; dev-server mobile
header split into its own responsive rule.
Stale tests reconciled with intentional product changes:
- workflowColumns graduated to always-on (board-workflows unit test).
- workflow optional-steps source re-pointed to v2 optional-group nodes.
- command-center pricing docs (one doc gap filled: openai-codex:* keying).
- SetupWizardModal added detectWorkspace + workspaceMode/taskPrefix payload.
- board-mobile listener-count assertion → unmount no-throw behavior.
- CommandCenterControls / ThemeSelector: default theme relabeled "Fusion Legacy".
- ProjectOverview / WorkflowNodeEditor: header divider intentionally removed.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- FloatingWindow: reusable non-blocking, draggable, smoothly-resizable window with focus-to-front z-index so multiple coexist (file browser + terminal + several task details open and movable at once).
- Task detail gains a Pop out (Maximize2) button in List + Board; App tracks multiple open floating task-detail windows (dedupe by id).
- New Task dialog is now a floating, draggable, resizable, non-blocking window; all quick-add controls visible without expanding (TaskForm forceMoreOptionsOpen).
- Dashboard Overview: removed the duplicate AI Engine row — View Board / View Agents moved into the first instance (the AI engine card, under Stop AI Engine).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
