- 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>
This merge addresses FN-3072 design feedback by updating CSS design tokens and mobile touch targets in ModelOnboardingModal, PluginSlot, and SettingsModal components, while also adding tests for droid settings plugin integration states. FN-3137 refines MissionManager's back-button navigation test as
Fusion-Task-Id: FN-3072
- Render merge strategy descriptions behind expandable disclosure sections in Settings modal
- Add dedicated disclosure styling and update task form expectations for the new copy structure
- Extend Settings modal tests to cover disclosure toggling and merge-description visibility
- Improve model onboarding API key action layout on mobile by stretching form width and aligning button placement
- WorkflowStepManager: fix React error #310 ("Rendered more hooks than during
the previous render") that broke the workflow steps panel from loading.
`useOverlayDismiss` was being called after `if (!isOpen) return null`, so
the hook count differed between open/closed renders. Move the hook above
the early return.
- ModelOnboardingModal: API-key input + Save button now span the full card
width on mobile via negative inline margins that bleed past the card's
horizontal padding, so the form sits flush to the card edges instead of
picking up a chunky left indent from the icon-row's flex start position.
- TerminalModal: same desktop-min-width-pinning bug as the onboarding modal.
Reset min-width/min-height to 0 on mobile with `!important` so persisted
desktop sizes from useModalResizePersist cannot re-pin the modal at 480×320
on smaller phones. Also add `!important` to the keyboard-overlap height/
max-height so the visual-viewport adjustment wins against the new
fullscreen rule — without this the terminal stayed at 100dvh while the
mobile keyboard covered the bottom of the screen.
- Add 0.7.1 changeset covering the full mobile polish + paperclip CLI parity
+ plugin runtime registry fallback + SCHEMA_VERSION bump series.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ModelOnboardingModal:
- API-key row was forced to flex-direction: column on mobile, stacking the
input above the Save button and doubling the vertical space inside the
already-cramped provider card. Switch to flex-direction: row with the
input growing (flex: 1, left-aligned) and Save shrunk to its label
(right-aligned). Tighten input/button min-height to 32px and shrink the
button's inline padding.
- Tighten surrounding form: gap → --space-xs, label font-size → 11px with
no margin-bottom, helper paragraphs → 11px / line-height 1.35.
NewAgentDialog:
- Top of the dialog was cut off under the iOS notch / status bar. Added
env(safe-area-inset-top) to the mobile header padding-top, and
env(safe-area-inset-bottom) to the footer padding-bottom so the home
indicator doesn't cover the action buttons.
- Body wasn't scrolling because the flex child kept its default
min-height: auto, making the dialog grow past the viewport and never
trigger overflow-y: auto. Added min-height: 0 + flex: 1 1 auto on the
body, and flex-shrink: 0 on the header/footer/steps so only the body
gives up height.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Previous mobile rule forced .onboarding-provider-card to flex-direction:
column with --space-lg padding, so the icon, body, and actions each took
their own full-width row and every card rendered ~140px tall on a phone.
Keep the icon inline beside the name + description (the row layout the
desktop already uses, just tighter), shrink the icon container to
list-item-bullet size, drop name/description font sizes a notch, and rely
on the existing flex-wrap so the API-key form / action buttons still drop
to their own row underneath. Also evenly split simple action rows (Connect
/ Skip) across the full width for easier tap targets.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- ModelOnboardingModal: the desktop base set min-width: 640px / min-height:
480px and the mobile media query only reset max-width — but min-width
always wins over max-width in size resolution, so the modal stayed pinned
at 640px and overflowed any phone narrower than that. Compounding it,
useModalResizePersist writes inline width/height from saved desktop
sessions (e.g. 1100px), and inline styles beat the media query. Reset
min-width/min-height to 0 in the mobile rule and force fullscreen
(100vw/100dvh) with !important so the persisted desktop size cannot
re-pin the modal off-screen. Also disable resize on mobile.
- NewAgentDialog: had no mobile media query at all. Added a max-width: 768px
block that drops the overlay padding, fills 100vw/100dvh, removes the
border-radius, tightens header/footer/steps padding, locks body scroll
with overscroll-behavior: contain + -webkit-overflow-scrolling: touch
(so iOS doesn't bubble the scroll up and trap users above the footer),
and stacks the footer buttons full-width. Also switched the desktop
max-height from 100vh to 100dvh so iOS Safari's collapsing URL bar
doesn't push the footer under the address bar.
- SettingsModal auth panel: reduced .auth-panel-body padding-inline from
--space-xl (24px) to --space-md (12px) so each provider card gets more
horizontal room — the cards are dense enough that the wider gutter
wasted visible width without any visual benefit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- ModelOnboardingModal: native CSS resize with persisted size via
useModalResizePersist; default ~1100px wide; modal scrolls inside
the content area instead of clipping.
- Provider cards flex-wrap so the API-key form drops to a full-width
row instead of being squished into a fixed side column. Connected
badge no longer stretches the full body width.
- Step changes now reset content scrollTop so each page lands at the
top.
- GitHub step: prominent GitHub mark via ProviderIcon; when gh CLI is
authenticated the intro reads as 'you are all set', primary CTA
becomes 'Continue with gh CLI auth', and a secondary
'Connect OAuth (optional)' button is offered.
- CustomModelDropdown: highlight init runs once per open session, and
filter changes reset highlight to top + scrollTop=0, fixing the
scroll-fight when filtering models.
- TUI dashboard: at >=150 cols, Stats panel sits to the left of Logs;
bottom row drops to Utilities + Settings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- ModelOnboardingModal: completed/skipped step indicators render as
<button> so they're clickable for review. Without explicit reset,
browsers gave them their default white-ish background. Added
background: transparent + border/padding/font-family resets to
.model-onboarding-step-indicator so it inherits cleanly from the
surrounding card on every theme.
- SettingsModal authentication: tightened spacing around providers —
group margin 16→10, group label margin 8→4, provider card margin
8→4, header padding 12 16 → 8 12. Less wasted space between rows.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Introduce a new "project-setup" onboarding step between GitHub and first-task actions
- Gate first-task navigation on project selection and add contextual setup-wizard guidance
- Centralize ordered onboarding step definitions in shared state and reuse them for navigation/progress labels
- Extract ModelOnboardingModal styles into a dedicated component CSS file and update tests/mocks for the new step order
