Switch the mobile row alignment from centered to space-between and
widen the icons+Save group to the full row, so the workflow/steps and
option-chip rows share the exact same left/right edges as the bottom
row. Group gaps remain as minimum spacing.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Center each wrapped row below the quick-add textarea (workflow/steps,
option chips, icons+Save) so all rows share equal left/right insets on
mobile, instead of options hugging the left edge and Save hugging the
right. Desktop/tablet keep the left-options / right-Save toolbar layout.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Tighten the mobile primary-group gap to --space-xs and the icon-only
controls' min-width floor to 32px so the Save button no longer wraps to
its own line in the board quick-add composer. Touch-target height is
unchanged.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The board composer's Save button rendered its label cut off on mobile
("Sav|").
## Root cause (measured, not guessed)
Reproduced in Chromium at a 412px viewport and measured the live layout:
- The primary action group needs **~275px** inside a **260px** column —
a 15px deficit.
- All five icon controls carry an explicit `min-width: 36px`
touch-target floor, so they **cannot** absorb it.
- Save's own automatic minimum size — which would normally floor a flex
item at its min-content width — is **zeroed by `overflow: hidden`**. Per
the flexbox spec, automatic minimum size applies only when `overflow` is
`visible`.
That `overflow: hidden` exists for a **vertical** reason
(FN-7680/FN-7683 height equalization). So a height fix silently made
Save the only horizontally-shrinkable control in the row: it absorbed
the entire deficit (**40px actual vs 55px needed**) and clipped its own
label.
## Fix
- Save is pinned to its content width (`flex: 0 0 auto; min-width:
max-content`) so it can never be squeezed. `overflow: hidden` stays — it
still owns the vertical clamp.
- The group may `flex-wrap: wrap` with `justify-content: flex-end`, so a
genuine deficit reflows to a second right-aligned line instead of
clipping.
**Not breakpoint-scoped** (FN-5751): the mechanism is width-driven, not
media-driven — mobile only trips it first because its 36px touch targets
are wider than the desktop chips. Where the row already fits, both rules
are inert.
This revises the older "wraps as one unit, never splitting Save from its
neighbors" intent: at widths where the row genuinely cannot fit, Save
wrapping to its own right-aligned line is strictly better than a clipped
label.
## Verification (in-browser, both breakpoints)
| | 412px (mobile) | 1400px (desktop) |
|---|---|---|
| label clipped | **no** (scrollWidth 67 === clientWidth 67) | no |
| Save width | 69px (full) | 69px |
| Save height | 36px — equal to icon siblings | unchanged |
| overflow | none (right edge 292 === container 292) | none |
| layout | wraps to a second right-aligned line | **no-op** — still one
line (group height 28px) |
| icon touch targets | all five still ≥36px | unchanged |
Gate green · lint clean · 288 dashboard composer tests pass.
## On the test
The CSS guard is a **string-match, not a layout proof** — jsdom has no
flex layout and cannot observe clipping, so the real proof is the
browser measurement above. The test exists so the invariant-bearing
declarations can't be silently dropped or re-scoped into a media query.
It was **confirmed non-vacuous**: 3 of its 4 cases fail against the
pre-fix CSS.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed the Quick Entry Save button label being clipped on narrow mobile
screens.
* Improved action layout wrapping while preserving icon touch-target
sizing.
* **Tests**
* Added regression coverage to verify the Save button remains fully
visible across narrow layouts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Operator design follow-up: even grouped, nine outlined chips read noisy.
Option controls and the secondary attach/Fast pair are now borderless
ghost buttons in muted text that gain a subtle fill and border on
hover/focus/open, leaving Save as the row's single emphasized control.
Scoped to the quick-entry action row; shared .btn/.dep-trigger rules
untouched.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Quick-add composer: single divider, option chips grouped left
(workflow, priority, steps, deps, models, node, agent, GitHub) and
primary actions right-aligned (attach, fast, Save last).
- Task cards get a visible kebab button (hover on desktop, always on
mobile) opening the same context menu as right-click, which was
previously undiscoverable.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Upgrades Quick Add action-row height parity from a bare min-height floor to a true fixed box height, then adds a mobile-only Save correction per operator feedback so Save matches its siblings at the <=768px breakpoint without touching desktop/tablet sizing.
- Pair min-height with an equal max-height (plus tokenized line-height and centered alignment) on `.quick-entry-actions .btn, .quick-entry-actions .wf-optional-steps-dropdown-trigger` at both the desktop base rule and the <=768px touch-target media block (FN-5751: never a breakpoint-only fix)
- Add a mobile-only override scoped to `[data-testid="quick-entry-save"]` inside the <=768px media query (zero vertical padding, line-height:1) so Save's text+icon content fits the same fixed box as its siblings, leaving desktop/tablet Save sizing untouched
- Add regression coverage asserting the fixed min-height==max-height contract at both breakpoints, that shared .btn-sm/.btn-icon/.dep-trigger rules are untouched, and that the Save-only override exists only inside the mobile media query
- Add a patch changeset documenting the fix and follow-up for @runfusion/fusion
Files changed:
.changeset/FN-7683-quick-add-height-parity.md | 7 +
.../quick-entry-workflow-trigger-height.test.tsx | 181 ++++++++++++++++++++-
.../dashboard/app/components/QuickEntryBox.css | 53 ++++++
3 files changed, 234 insertions(+), 7 deletions(-)
Fusion-Task-Id: FN-7683
Fusion-Task-Lineage: d3df638a-812e-4fc2-aada-cfee58d29f2b
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Narrative: swaps a hardcoded px padding value for token-based spacing on the quick-entry workflow-selector trigger so it complies with the tokenized-CSS lint rule, while preserving visual sizing parity.
- Replace `padding: 4px 10px` with `padding: var(--space-sm) var(--space-md)` on `.quick-entry-workflow-trigger`.
- Add FNXC:QuickAddWorkflow comment explaining the token substitution and confirming height parity is governed by the existing FN-7680 min-height normalization, not this padding.
Files changed:
packages/dashboard/app/components/QuickEntryBox.css | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
Fusion-Task-Id: FN-7682
Fusion-Task-Lineage: e2213e7d-5c38-460b-9727-57199d86b153
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
Keep the Quick Add workflow selector compact without sacrificing readable workflow menu options.
- Narrow the closed workflow trigger and truncate only its label so action controls keep room.
- Portal and viewport-clamp the expanded workflow menu for right-side columns and mobile layouts.
- Preserve readable wrapping for long workflow names and duplicate-id subtitles in the menu.
- Cover compact trigger sizing, menu readability, and viewport clamping with QuickEntryBox tests.
- Add a patch changeset for the published Fusion package.
Files changed:
.changeset/fn-7302-quick-add-workflow-trigger.md | 7 ++
.../dashboard/app/components/QuickEntryBox.css | 29 ++++--
.../dashboard/app/components/QuickEntryBox.tsx | 114 ++++++++++++++++++++-
.../components/__tests__/QuickEntryBox.test.tsx | 79 +++++++++++++-
4 files changed, 211 insertions(+), 18 deletions(-)
Fusion-Task-Id: FN-7302
Fusion-Task-Lineage: 4a8042d8-6cc5-4f40-bbcb-71aa5bfb7cd2
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
- Toolbar (Bulk Edit / View / New Task) is centered (dropped the margin-left:auto right-push).
- List divider now draws its 1px line via .list-split-sidebar border-right (identical to Chat's .chat-sidebar), with a transparent hover-tint handle; removed the doubled detail border-left.
- Quick-add input padding-right 70px (inherited from the global .description-with-refine textarea refine-button reservation) tightened to space-sm — no overlaid button there, so text reclaims the width.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- GitHub import preview shows the full issue/PR body (markdown) + metadata (list already returned full bodies; removed client truncation).
- Task-detail main view: constrain width (no right cutoff); move 'Back to board' into the gray header far right.
- Dock pop-out: smoother touch drag (touch-action:none + captured-element listeners); popping out closes the dock but keeps the floating modal; modal survives dock dismiss.
- Remove duplicate inner headers in Git Manager / Activity Log / Dev Server / Secrets (dock + pop-out chrome already titles them); keep the title on mobile narrow; relocate gm Refresh into the section tab strip.
- Git Manager tabs: one scrollable row of compact icon-only tabs (max visible, scroll if needed).
- List quick entry is single-line (not tall) via singleLine prop; Board unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Prevent mobile quick-entry action taps from being swallowed by browser touch gestures.
- apply a mobile touch-action override to quick-entry action containers and their descendants
- keep the existing mobile button sizing while removing the redundant per-button touch-action rule
- add a regression test that inspects the mobile CSS rule covering quick-entry action controls
Files changed:
.changeset/quick-entry-mobile-touch.md | 5 +++++
packages/dashboard/app/components/QuickEntryBox.css | 8 ++++----
packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx | 17 +++++++++++++++++
3 files changed, 26 insertions(+), 4 deletions(-)
Fusion-Task-Id: FN-6153
Fusion-Task-Lineage: e915bb06-2c45-4d96-b719-2b7efcf6f986
Preserve quick-entry mobile touch behavior for Fast and Priority controls.
- treat action touch targets as generic Elements so nested SVG taps still resolve to their parent buttons
- add mobile touch-action styling for quick-entry action buttons to improve tap handling
- extend QuickEntryBox mobile tests to cover Fast toggle, Priority picker, and SVG touch targets
Files changed:
packages/dashboard/app/components/QuickEntryBox.css | 5 +
packages/dashboard/app/components/QuickEntryBox.tsx | 2 +-
packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx | 117 +++++++++++++++++----
3 files changed, 102 insertions(+), 22 deletions(-)
Fusion-Task-Id: FN-6145
Fusion-Task-Lineage: 2af1c142-25ba-41a8-ba4f-c58e38cc870a
- Broaden mobile media query to include (max-height: 480px) so landscape
phones (which exceed 768 CSS px wide) still render the bottom nav and
mobile board layout instead of desktop horizontally-scrollable columns.
- Guard useMobileKeyboard against pinch-zoom (vv.scale > 1) — Android
Chrome ignores user-scalable=no, and a focused textarea + zoom was
false-positiving keyboard-open and hiding MobileNavBar.
- Read documentElement.clientHeight instead of stale window.innerHeight
when computing keyboard overlap (Android multi-window can leave
innerHeight cached at a wildly different value than the actual layout
viewport — observed 2848 while html was 797).
- Add interactive-widget=resizes-content to the viewport meta so Android
Chrome shrinks the layout viewport with the soft keyboard, matching iOS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Merges the roadmap plugin scaffold (FN-3636): a new `plugins/fusion-plugin-roadmap` workspace with domain types (`roadmap-types.ts`), a store layer (`roadmap-store.ts`, `roadmap-ordering.ts`, `roadmap-handoff.ts`), and comprehensive test suites. Also lands graph position persistence for the dependen
Fusion-Task-Id: FN-3636
Removes the `QuickEntryBox` component and its styles as part of FN-3632 cleanup, with its tests refactored accordingly. Also updates the test-changed script and fixes an isolated test home cleanup ordering issue.
Fusion-Task-Id: FN-3632
After dismissing and re-bringing up the mobile keyboard, iOS could
leave window.scrollY > 0 and visualViewport.offsetTop > 0. With
useMobileScrollLock then pinning body{position:fixed} relative to that
drifted scroll, the message thread anchored above the visible viewport
and a large blank area appeared below it.
handleInputFocus now resets window scroll to (0,0) on mobile in a
zero-delay timeout — late enough that iOS finishes its own
scroll-into-view first, but before useMobileScrollLock observes the
drifted state.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This merge adds a quick-entry priority control to the QuickEntryBox component, polishes GitHub source issue summary styling in the TaskDetailModal, and documents layered agent memory access in the agents reference. The changes include both the component implementation with 186 lines of new logic and
Fusion-Task-Id: FN-3186
Completes Step 2 of FN-3042 by scaling board typography styles across TaskCard and QuickEntryBox components, adding a new CustomModelDropdown stylesheet, and introducing keyboard focus-visible styles for theme selector controls. The merge includes new regression tests for board font scaling, resolve
Fusion-Task-Id: FN-3042
- Increase desktop nested model menu width baseline for better model-name readability
- Raise desktop width floor from 240px to 320px while preserving viewport clamping
- Replace hardcoded QuickEntryBox menu spacing/shadow/radius values with design tokens
- Update QuickEntryBox nested menu tests to assert the new desktop width behavior
Fusion-Task-Id: FN-3010
- Resolve merge conflicts in InlineCreateCard and QuickEntryBox using the existing node picker UX
- Replace ad-hoc node status rendering with NodeHealthDot in task creation surfaces
- Keep advanced quick-create controls and portal-based dropdown behavior intact
- Preserve related dashboard styling and tests included in the staged squash
Fusion-Task-Id: FN-2729
- Add node status indicators and labels to task creation, quick entry, task form, and settings node selectors
- Surface selected node health in list bulk-edit controls with status dot styling for online/connecting/offline/error states
- Update dashboard component CSS and shared styles for consistent node status presentation
- Include changeset documenting unavailable-node routing policy and default node behavior
- Add a core node-override-guard module, export it from @fusion/core, and enforce conflicts in store updates
- Add API route and CLI extension safeguards so nodeId override updates are blocked when ownership would conflict
- Wire node override routing and validation through dashboard quick-create, list, modal, settings, and task form/detail surfaces
- Add focused unit and integration tests for core guard logic, workflow routes, and dashboard node override UX
Sweep 1 of the styles.css split. Rules where the desktop counterpart already
lived in a component CSS file have been moved out of the global mobile @media
block in styles.css and appended to the matching component file's mobile
block. styles.css 4551 → 4488.
Affected components: Header, AgentsView, DocumentsView, ListView, QuickChatFAB,
QuickEntryBox, ScriptsModal, TaskDetailModal, TerminalModal, WorkflowResultsTab.
Truly global mobile rules (input font-size for iOS auto-zoom, html/body
overflow, root safe-area padding, base .btn touch targets, bare element
selectors) intentionally stay in styles.css. The remaining bulk of the mobile
block (settings, auth, board/card, inline-create) cannot move yet because
their desktop rules are still in styles.css — those will fall out as part of
the cards and settings extraction sweeps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Split app/styles.css from ~40k lines down to ~4.5k. Created 56 co-located
component CSS files in app/components/, each imported by its owning .tsx.
The remainder of styles.css holds genuinely global rules (design tokens,
.btn/.card/.modal/.form-input primitives, cross-component @media overrides).
- Lazy-load 13 heavy views (AgentsView, RoadmapsView, NodesView, etc.) via
React.lazy + Suspense; prefetch all chunks on idle so first navigation is
instant. Initial JS bundle: 1.58 MB → 1.16 MB (-26%). Initial CSS bundle:
635 kB → 471 kB (-26%); the rest splits into 13 per-view chunks.
- Add app/test/cssFixture.ts exposing loadAllAppCss() + loadAllAppCssBaseOnly()
so CSS regression tests load the full per-component bundle (mirroring Vite
source order). Migrate 30+ tests off direct readFileSync('../styles.css').
- Enable test.css: { include: [/.+/] } in vitest.config.ts so component CSS
imports actually inject styles in jsdom (fixes getComputedStyle assertions).
- Add ESLint rule (no-restricted-syntax) banning direct styles.css reads in
dashboard test files; points at loadAllAppCss() instead.
- Restore lost utility classes (.text-muted, .text-secondary, .text-dim,
.form-input) and rescue dropped chat tool-call rules into QuickChatFAB.css.
- Mobile fixes along the way: scroll containment for view containers
(min-height:0 + -webkit-overflow-scrolling), QuickChatFAB full-screen on
mobile (with safe-area-inset for iOS home bar), AgentsView single-row
header layout, ActivityLogModal close button on right, model-combobox
z-index above the mobile quick-chat panel.
- Bug fix: SkillsView toggle was display:none which hid the input from the
accessibility tree; replaced with the visually-hidden pattern so screen
readers + getByRole still find the checkbox.
- Bug fix: standalone Delete button in TaskDetailModal for triage-column
tasks (Actions dropdown is hidden in triage state, so previously no way
to delete a freshly-created task without status change first).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
