diff --git a/.changeset/fn-7751-mobile-settings-search-inline.md b/.changeset/fn-7751-mobile-settings-search-inline.md new file mode 100644 index 0000000000..66e34fbfb8 --- /dev/null +++ b/.changeset/fn-7751-mobile-settings-search-inline.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Mobile Settings search icon now sits inline next to the section dropdown. +category: fix +dev: SettingsModal moves .settings-search-toggle into the .settings-mobile-section-picker row; desktop unchanged. diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index 0775e7c91f..dfe6769c2c 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -13,8 +13,8 @@ When Fusion detects a newer `@runfusion/fusion` release, the Settings modal foot Use **Search settings** at the top of Settings to find the section that contains a setting by name or keyword. The same search works in the Settings modal and embedded Settings page, filters both the desktop section list and mobile section picker, and only searches sections currently visible for enabled feature flags. - -On mobile, the search row starts collapsed behind a compact toggle icon (top of the Settings navigation) to save vertical space; tap it to reveal the search input and tap again to hide it. An in-progress search query is preserved across collapse/expand. Desktop and tablet always show the search row with no toggle. + +On mobile, the search row starts collapsed behind a compact toggle icon beside the **Settings Section** dropdown to save vertical space; tap it to reveal the search input and tap again to hide it. An in-progress search query is preserved across collapse/expand. Desktop and tablet always show the search row with no toggle. Every user-editable setting's help text (the `.settings-description`/`` hint under a field) states its own default value — for example “Default: 3.”, “Default: enabled.”, or “No default — unset (inherits the global setting).” for values that fall back to another scope. Canonical default values come from `DEFAULT_GLOBAL_SETTINGS` / `DEFAULT_PROJECT_SETTINGS` in `packages/core/src/settings-schema.ts`; the dashboard copy never invents a number. A guard test (`settings-default-descriptions.test.tsx`) enforces that every surfaced setting states its default and that every `DEFAULT_SETTINGS` key is either documented or explicitly allowlisted as not surfaced in the Settings UI. diff --git a/packages/dashboard/app/components/SettingsModal.css b/packages/dashboard/app/components/SettingsModal.css index 8e4668a199..134d9753f5 100644 --- a/packages/dashboard/app/components/SettingsModal.css +++ b/packages/dashboard/app/components/SettingsModal.css @@ -558,9 +558,7 @@ The embedded title reads like other embedded-view titles (Planning modal-header- border-bottom: var(--btn-border-width) solid var(--border); } -/* FNXC:Settings 2026-07-09-00:00: the row wraps label + input + results; on desktop it always - renders (see .settings-search-toggle below, hidden here). On mobile the toggle in SettingsModal.tsx - controls whether this wrapper mounts at all. */ +/* FNXC:Settings 2026-07-09-12:00: the row wraps label + input + results; on desktop it always renders (see .settings-search-toggle below, hidden here). On mobile the inline section-picker toggle controls whether this wrapper mounts below the picker, avoiding an empty padded shell above the picker while collapsed. */ .settings-search-row { display: flex; flex-direction: column; @@ -2193,14 +2191,12 @@ The header row wraps so the badge drops below the heading on narrow widths inste padding: var(--space-md) var(--space-lg) var(--space-sm); } - /* FNXC:Settings 2026-07-09-00:00: mobile-only collapse-by-default toggle. The row starts - collapsed (only the icon button renders) and expands to the full search row on tap. */ + /* FNXC:Settings 2026-07-09-12:00: mobile-only collapse-by-default toggle sits in the section picker control row so search and section navigation share one horizontal affordance row. The row starts collapsed and expands to the full search row below the picker on tap. */ .settings-search-toggle { --settings-search-toggle-touch-target: calc(var(--space-lg) + var(--space-lg) + var(--space-xs)); display: inline-flex; align-items: center; justify-content: center; - align-self: flex-start; width: var(--settings-search-toggle-touch-target); height: var(--settings-search-toggle-touch-target); flex-shrink: 0; @@ -2233,7 +2229,22 @@ The header row wraps so the badge drops below the heading on narrow widths inste text-transform: uppercase; } + .settings-mobile-section-picker-control-row { + display: flex; + align-items: center; + gap: var(--space-xs); + min-width: 0; + } + .settings-mobile-section-picker select { + flex: 1 1 auto; + min-width: 0; + width: 100%; + } + + .settings-mobile-section-picker .settings-search-empty-hint { + flex: 1 1 auto; + min-width: 0; width: 100%; } diff --git a/packages/dashboard/app/components/SettingsModal.tsx b/packages/dashboard/app/components/SettingsModal.tsx index 76ddfa9f18..55f018554b 100644 --- a/packages/dashboard/app/components/SettingsModal.tsx +++ b/packages/dashboard/app/components/SettingsModal.tsx @@ -3651,26 +3651,51 @@ export function SettingsModal({ ) : (