FN-7804: show compact version label in mobile Settings footer
Mobile Settings footer now shows a compact "vX.Y.Z" version label instead of the full "Version X.Y.Z" wording, freeing horizontal space on small viewports while desktop/tablet keep the full label.
- SettingsModal renders settings.footer.versionShort ("v{{version}}") when viewportMode === "mobile", falling back to the existing settings.footer.version label otherwise
- Added settings.footer.versionShort translation key to en and fr locale files
- Updated settings-mobile tests: renamed/adjusted the mobile version test to assert the compact label and added a new test asserting the full label is kept outside the mobile viewport
- Added a patch changeset documenting the fix
Files changed:
.changeset/fn-7804-mobile-settings-version.md | 7 +++++++
packages/dashboard/app/components/SettingsModal.tsx | 10 +++++++++-
.../app/components/__tests__/settings-mobile.test.tsx | 18 +++++++++++++++---
packages/i18n/locales/en/app.json | 1 +
packages/i18n/locales/fr/app.json | 1 +
5 files changed, 33 insertions(+), 4 deletions(-)
Fusion-Task-Id: FN-7804
Fusion-Task-Lineage: 3ff5af53-3242-44b8-b8d8-6b81f416a333
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
7
.changeset/fn-7804-mobile-settings-version.md
Normal file
7
.changeset/fn-7804-mobile-settings-version.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
summary: Mobile Settings footer shows the compact "v0.x" version instead of the full word.
|
||||||
|
category: fix
|
||||||
|
dev: SettingsModal picks settings.footer.versionShort ("v{{version}}") when viewportMode === "mobile".
|
||||||
@@ -3856,7 +3856,15 @@ export function SettingsModal({
|
|||||||
aria-label={t("settings.footer.checkUpdates", "Check for updates")}
|
aria-label={t("settings.footer.checkUpdates", "Check for updates")}
|
||||||
title={t("settings.footer.checkUpdates", "Check for updates")}
|
title={t("settings.footer.checkUpdates", "Check for updates")}
|
||||||
>
|
>
|
||||||
<span className="settings-modal-version">{t("settings.footer.version", "Version {{version}}", { version: appVersion })}</span>
|
{/*
|
||||||
|
FNXC:Settings 2026-07-10-21:33:
|
||||||
|
Mobile Settings footer needs the compact v{{version}} label to preserve horizontal space; desktop and tablet keep the full Version {{version}} word.
|
||||||
|
*/}
|
||||||
|
<span className="settings-modal-version">
|
||||||
|
{viewportMode === "mobile"
|
||||||
|
? t("settings.footer.versionShort", "v{{version}}", { version: appVersion })
|
||||||
|
: t("settings.footer.version", "Version {{version}}", { version: appVersion })}
|
||||||
|
</span>
|
||||||
<RefreshCw size={12} className={updateCheckLoading ? "spinning" : undefined} />
|
<RefreshCw size={12} className={updateCheckLoading ? "spinning" : undefined} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -226,20 +226,32 @@ describe("SettingsModal mobile adaptations", () => {
|
|||||||
expect(updateSettings).not.toHaveBeenCalled();
|
expect(updateSettings).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders the app version label in mobile layout", async () => {
|
it("renders the compact app version label in mobile layout", async () => {
|
||||||
mockSettingsViewport(true);
|
mockSettingsViewport(true);
|
||||||
const { findByText, container } = render(<SettingsModal onClose={vi.fn()} addToast={vi.fn()} />);
|
const { findByText, queryByText, container } = render(<SettingsModal onClose={vi.fn()} addToast={vi.fn()} />);
|
||||||
await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
|
await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
|
||||||
|
|
||||||
const version = await findByText("Version 1.2.3");
|
const version = await findByText("v1.2.3");
|
||||||
const modalActions = container.querySelector(".modal-actions");
|
const modalActions = container.querySelector(".modal-actions");
|
||||||
const modalHeader = container.querySelector(".modal-header");
|
const modalHeader = container.querySelector(".modal-header");
|
||||||
|
|
||||||
expect(version).toBeTruthy();
|
expect(version).toBeTruthy();
|
||||||
|
expect(queryByText("Version 1.2.3")).toBeNull();
|
||||||
expect(modalActions?.contains(version)).toBe(true);
|
expect(modalActions?.contains(version)).toBe(true);
|
||||||
expect(modalHeader?.contains(version)).toBe(false);
|
expect(modalHeader?.contains(version)).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps the full app version label outside the mobile viewport", async () => {
|
||||||
|
mockSettingsViewport(false);
|
||||||
|
const { findByText, queryByText, container } = render(<SettingsModal onClose={vi.fn()} addToast={vi.fn()} />);
|
||||||
|
await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
|
||||||
|
|
||||||
|
const version = await findByText("Version 1.2.3");
|
||||||
|
expect(version).toBeTruthy();
|
||||||
|
expect(queryByText("v1.2.3")).toBeNull();
|
||||||
|
expect(container.querySelector(".modal-actions")?.contains(version)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
it("keeps update-check button clickable from the standalone and embedded mobile footers", async () => {
|
it("keeps update-check button clickable from the standalone and embedded mobile footers", async () => {
|
||||||
mockSettingsViewport(true);
|
mockSettingsViewport(true);
|
||||||
const user = userEvent.setup();
|
const user = userEvent.setup();
|
||||||
|
|||||||
@@ -5806,6 +5806,7 @@
|
|||||||
"footer": {
|
"footer": {
|
||||||
"help": "Help",
|
"help": "Help",
|
||||||
"version": "Version {{version}}",
|
"version": "Version {{version}}",
|
||||||
|
"versionShort": "v{{version}}",
|
||||||
"checkUpdates": "Check for updates",
|
"checkUpdates": "Check for updates",
|
||||||
"helpDiscussions": "Help and discussions"
|
"helpDiscussions": "Help and discussions"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -5796,6 +5796,7 @@
|
|||||||
"footer": {
|
"footer": {
|
||||||
"help": "Aide",
|
"help": "Aide",
|
||||||
"version": "Version {{version}}",
|
"version": "Version {{version}}",
|
||||||
|
"versionShort": "v{{version}}",
|
||||||
"checkUpdates": "",
|
"checkUpdates": "",
|
||||||
"helpDiscussions": ""
|
"helpDiscussions": ""
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user