FN-5668: preserve word-boundary wrapping in mobile settings text

Prevent mobile settings prose from splitting words mid-token while keeping long code snippets overflow-safe.

- add a CSS regression test that inspects the mobile media-query rules in SettingsModal.css
- switch mobile backup code wrapping to overflow-wrap:anywhere with normal word-break
- update mobile settings helper text to keep break-word wrapping with normal word-break

Files changed:
 .../app/__tests__/settings-mobile-wrap.test.ts     | 46 ++++++++++++++++++++++
 .../dashboard/app/components/SettingsModal.css     |  5 ++-
 2 files changed, 49 insertions(+), 2 deletions(-)

Fusion-Task-Id: FN-5668

Fusion-Task-Lineage: eb66376e-a535-4d07-adfe-4a2d048b93a7

packages/dashboard/app/__tests__/settings-mobile-wrap.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+describe("settings-mobile-wrap.css", () => {
+  const cssPath = resolve(__dirname, "../components/SettingsModal.css");
+  const cssContent = readFileSync(cssPath, "utf8");
+
+  function extractMobileMediaBlocks(content: string): string {
+    const blocks: string[] = [];
+    const regex = /@media[^{]*\(max-width: 768px\)[^{]*\{/g;
+    let match: RegExpExecArray | null;
+
+    while ((match = regex.exec(content)) !== null) {
+      const startIdx = match.index + match[0].length;
+      let braceCount = 1;
+      let endIdx = startIdx;
+      while (braceCount > 0 && endIdx < content.length) {
+        if (content[endIdx] === "{") braceCount++;
+        if (content[endIdx] === "}") braceCount--;
+        endIdx++;
+      }
+      if (braceCount === 0) {
+        blocks.push(content.slice(startIdx, endIdx - 1));
+      }
+    }
+
+    return blocks.join("\n");
+  }
+
+  const mobileCss = extractMobileMediaBlocks(cssContent);
+
+  it("keeps prose help text wrapping at word boundaries", () => {
+    const proseRule = mobileCss.match(/\.settings-content \.form-group small\s*\{[^}]*\}/)?.[0];
+    expect(proseRule).toBeTruthy();
+    expect(proseRule).toMatch(/overflow-wrap:\s*break-word/);
+    expect(proseRule).toMatch(/word-break:\s*normal/);
+    expect(proseRule).not.toMatch(/word-break:\s*break-all/);
+  });
+
+  it("keeps code tokens overflow-safe on mobile", () => {
+    const codeRule = mobileCss.match(/\.backup-list li code\s*\{[^}]*\}/)?.[0];
+    expect(codeRule).toBeTruthy();
+    expect(codeRule).toMatch(/overflow-wrap:\s*anywhere|word-break:\s*break-all|word-break:\s*break-word/);
+  });
+});

packages/dashboard/app/components/SettingsModal.css

@@ -357,7 +357,8 @@
 
   .backup-list li code {
     white-space: normal;
-    word-break: break-all;
+    overflow-wrap: anywhere;
+    word-break: normal;
   }
 }
 
@@ -1805,7 +1806,7 @@
 
   .settings-content .form-group small {
     overflow-wrap: break-word;
-    word-break: break-all;
+    word-break: normal;
   }
 
   .settings-content input,