From 547740bb6696c7f90ebb5ab3dbc06c6f084eb9e7 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Thu, 9 Jul 2026 20:13:20 -0700
Subject: [PATCH] FN-7751: move mobile settings search toggle inline with
 section picker

Relocates the mobile-only settings search icon toggle so it sits inline next to the section dropdown instead of its own row above it, tightening the mobile Settings header.

- Move the settings-search-toggle button out of the standalone .settings-search row into a new .settings-mobile-section-picker-control-row alongside the mobile section <select>.
- Preserve FN-7713 expand/hide toggle behavior and active-query preservation; desktop/tablet layout unaffected.
- Add CSS for .settings-mobile-section-picker-control-row to lay out the select and toggle button inline.
- Update settings-mobile tests to assert the toggle renders next to the section picker.
- Add changeset (patch) documenting the fix.

Files changed:
 .../fn-7751-mobile-settings-search-inline.md       |  7 ++
 docs/dashboard-guide.md                            |  4 +-
 .../dashboard/app/components/SettingsModal.css     | 23 ++++--
 .../dashboard/app/components/SettingsModal.tsx     | 89 +++++++++++-----------
 .../components/__tests__/settings-mobile.test.tsx  | 38 ++++++++-
 5 files changed, 105 insertions(+), 56 deletions(-)

Fusion-Task-Id: FN-7751

Fusion-Task-Lineage: 8bb9a32b-80f4-4b73-a366-d23e97106b73

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
---
 .../fn-7751-mobile-settings-search-inline.md  |  7 ++
 docs/dashboard-guide.md                       |  4 +-
 .../app/components/SettingsModal.css          | 23 +++--
 .../app/components/SettingsModal.tsx          | 89 ++++++++++---------
 .../__tests__/settings-mobile.test.tsx        | 38 +++++++-
 5 files changed, 105 insertions(+), 56 deletions(-)
 create mode 100644 .changeset/fn-7751-mobile-settings-search-inline.md

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
 <!-- FNXC:SettingsSearchDocs 2026-07-04-00:00: Settings search is section-discovery, not a global command palette. Document that it filters visible Settings sections by section names and setting keywords while preserving feature-gated hidden sections. -->
 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.
 
-<!-- FNXC:Settings 2026-07-09-00:00: FN-7713 collapses the mobile search row by default behind a toggle icon to reclaim vertical space above the section picker; desktop/tablet keep the row always visible with no toggle. -->
-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.
+<!-- FNXC:Settings 2026-07-09-12:00: FN-7751 keeps FN-7713's collapsed mobile search row but moves the toggle inline beside the section dropdown so mobile Settings exposes one compact section/search control row; desktop/tablet keep the row always visible 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.
 
 <!-- FNXC:SettingsDefaults 2026-07-04-00:00: FN-7505 requires every user-editable setting's help text to state its own default value, so operators reading a field's description know what it defaults to without checking the reference doc. -->
 Every user-editable setting's help text (the `.settings-description`/`<small>` 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({
         ) : (
           <div className="settings-layout">
             <aside className="settings-navigation" aria-label={t("settings.search.navigationLabel", "Settings navigation")}> 
-              <div className="settings-search" data-testid="settings-search">
-                {isMobileSettingsSearch && (
-                  // FNXC:Settings 2026-07-09-00:00: mobile-only compact icon toggle; hidden entirely on
-                  // desktop/tablet via `isMobileSettingsSearch`, which always shows the row instead.
-                  <button
-                    type="button"
-                    className="btn btn-sm btn-icon settings-search-toggle"
-                    onClick={() => setMobileSearchRowExpanded((expanded) => !expanded)}
-                    aria-expanded={settingsSearchRowVisible}
-                    aria-controls="settings-search-row-region"
-                    aria-label={
-                      settingsSearchRowVisible
-                        ? t("settings.search.toggleHide", "Hide search")
-                        : t("settings.search.toggleShow", "Show search")
-                    }
-                  >
-                    {settingsSearchRowVisible ? <SearchToggleCloseIcon size={16} /> : <Search size={16} />}
-                  </button>
-                )}
-                {settingsSearchRowVisible && (
+              {showMobileSectionPicker && (
+                <div className="settings-mobile-section-picker">
+                  <label htmlFor="settings-mobile-section">{t("settings.mobileNav.label", "Settings Section")}</label>
+                  <div className="settings-mobile-section-picker-control-row">
+                    {hasSettingsSearchResults ? (
+                      <select
+                        id="settings-mobile-section"
+                        className="select touch-target"
+                        value={activeSection}
+                        onChange={(event) => setActiveSection(event.target.value as SectionId)}
+                      >
+                        {searchableSectionOptions.map((section) => {
+                          const label = t(section.labelKey, section.label);
+                          return (
+                            <option key={section.id} value={section.id}>
+                              {resolveSettingsSectionOptionLabel(section, label)}
+                            </option>
+                          );
+                        })}
+                      </select>
+                    ) : (
+                      <p className="settings-search-empty-hint">{t("settings.search.noMobileOptions", "No sections match this search.")}</p>
+                    )}
+                    {isMobileSettingsSearch && (
+                      // FNXC:Settings 2026-07-09-12:00: mobile-only search toggle now lives inline beside the section picker control so section navigation and search read as one compact row; FN-7713 expand/hide behavior and active-query preservation remain unchanged.
+                      <button
+                        type="button"
+                        className="btn btn-sm btn-icon settings-search-toggle"
+                        onClick={() => setMobileSearchRowExpanded((expanded) => !expanded)}
+                        aria-expanded={settingsSearchRowVisible}
+                        aria-controls="settings-search-row-region"
+                        aria-label={
+                          settingsSearchRowVisible
+                            ? t("settings.search.toggleHide", "Hide search")
+                            : t("settings.search.toggleShow", "Show search")
+                        }
+                      >
+                        {settingsSearchRowVisible ? <SearchToggleCloseIcon size={16} /> : <Search size={16} />}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+              {settingsSearchRowVisible && (
+                <div className="settings-search" data-testid="settings-search">
                   <div id="settings-search-row-region" className="settings-search-row">
                     <label className="settings-search-label" htmlFor="settings-search-input">
                       {t("settings.search.label", "Search settings")}
@@ -3709,30 +3734,6 @@ export function SettingsModal({
                         : t("settings.search.allSections", "Showing all settings sections")}
                     </div>
                   </div>
-                )}
-              </div>
-              {showMobileSectionPicker && (
-                <div className="settings-mobile-section-picker">
-                  <label htmlFor="settings-mobile-section">{t("settings.mobileNav.label", "Settings Section")}</label>
-                  {hasSettingsSearchResults ? (
-                    <select
-                      id="settings-mobile-section"
-                      className="select touch-target"
-                      value={activeSection}
-                      onChange={(event) => setActiveSection(event.target.value as SectionId)}
-                    >
-                      {searchableSectionOptions.map((section) => {
-                        const label = t(section.labelKey, section.label);
-                        return (
-                          <option key={section.id} value={section.id}>
-                            {resolveSettingsSectionOptionLabel(section, label)}
-                          </option>
-                        );
-                      })}
-                    </select>
-                  ) : (
-                    <p className="settings-search-empty-hint">{t("settings.search.noMobileOptions", "No sections match this search.")}</p>
-                  )}
                 </div>
               )}
               <nav className="settings-sidebar">
diff --git a/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx b/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
index 76ea56c610..570156dcfa 100644
--- a/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
+++ b/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
@@ -505,6 +505,10 @@ describe("SettingsModal mobile adaptations", () => {
 
     expectMobileRule(css, ".settings-layout", "flex-direction: column;");
     expectMobileRule(css, ".settings-mobile-section-picker", "display: flex;");
+    expectMobileRule(css, ".settings-mobile-section-picker-control-row", "display: flex;");
+    expectMobileRule(css, ".settings-mobile-section-picker-control-row", "align-items: center;");
+    expectMobileRule(css, ".settings-mobile-section-picker select", "flex: 1 1 auto;");
+    expectMobileRule(css, ".settings-mobile-section-picker .settings-search-empty-hint", "flex: 1 1 auto;");
     expectMobileRule(css, ".settings-navigation", "width: 100%;");
     expectMobileRule(css, ".settings-search", "padding: var(--space-md) var(--space-lg) var(--space-sm);");
     expectMobileRule(css, ".settings-sidebar", "display: none;");
@@ -605,16 +609,24 @@ describe("SettingsModal mobile adaptations", () => {
       const toggle = getByLabelText("Show search");
       expect(toggle.getAttribute("aria-expanded")).toBe("false");
       expect(toggle.getAttribute("aria-controls")).toBe("settings-search-row-region");
+      const picker = toggle.closest(".settings-mobile-section-picker") as HTMLElement;
+      expect(picker).toBeTruthy();
+      expect(within(picker).getByLabelText("Settings Section")).toBeTruthy();
+      expect(queryByTestId("settings-search")).toBeNull();
 
       await user.click(toggle);
-      expect(await findByLabelText("Hide search")).toBeTruthy();
-      expect(getByLabelText("Hide search").getAttribute("aria-expanded")).toBe("true");
+      const hideToggle = await findByLabelText("Hide search");
+      expect(hideToggle).toBeTruthy();
+      expect(hideToggle.getAttribute("aria-expanded")).toBe("true");
+      expect(hideToggle.closest(".settings-mobile-section-picker")).toBe(picker);
       expect(document.getElementById("settings-search-row-region")).toBeTruthy();
+      expect(picker.nextElementSibling?.classList.contains("settings-search")).toBe(true);
 
       await user.click(getByLabelText("Hide search"));
       await waitFor(() => expect(queryByTestId("settings-search-input")).toBeNull());
       expect(getByLabelText("Show search").getAttribute("aria-expanded")).toBe("false");
-      // No leftover shell for the results region while collapsed.
+      // No leftover shell for the search row or results region while collapsed.
+      expect(queryByTestId("settings-search")).toBeNull();
       expect(document.getElementById("settings-search-row-region")).toBeNull();
       expect(document.getElementById("settings-search-results")).toBeNull();
     });
@@ -642,18 +654,36 @@ describe("SettingsModal mobile adaptations", () => {
 
     it("keeps the desktop search row always visible with no toggle rendered", async () => {
       mockSettingsViewport(false);
-      const { queryByLabelText, getByTestId } = render(<SettingsModal onClose={vi.fn()} addToast={vi.fn()} />);
+      const { container, queryByLabelText, getByTestId } = render(<SettingsModal onClose={vi.fn()} addToast={vi.fn()} />);
       await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
 
       expect(getByTestId("settings-search-input")).toBeTruthy();
       expect(queryByLabelText("Show search")).toBeNull();
       expect(queryByLabelText("Hide search")).toBeNull();
+      expect(container.querySelector(".settings-mobile-section-picker .settings-search-toggle")).toBeNull();
+    });
+
+    it("keeps the inline toggle reachable when mobile search has no section results", async () => {
+      mockSettingsViewport(true);
+      const user = userEvent.setup();
+      const { getByLabelText, getByTestId, findByText } = render(<SettingsModal onClose={vi.fn()} addToast={vi.fn()} />);
+      await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+
+      await user.click(getByLabelText("Show search"));
+      await user.type(getByTestId("settings-search-input"), "zzzzzz-no-match");
+
+      const emptyHint = await findByText("No sections match this search.");
+      const picker = emptyHint.closest(".settings-mobile-section-picker") as HTMLElement;
+      expect(picker).toBeTruthy();
+      expect(within(picker).getByLabelText("Hide search")).toBeTruthy();
+      expect(picker.querySelector("#settings-mobile-section")).toBeNull();
     });
 
     it("contains the mobile-only toggle CSS override and hides it on desktop", () => {
       const css = loadAllAppCss();
 
       expectMobileRule(css, ".settings-search-toggle", "display: inline-flex;");
+      expectMobileRule(css, ".settings-search-toggle", "flex-shrink: 0;");
       expectBaseRule(css, ".settings-search-toggle", "display: none;");
     });
   });