23e0593cb1
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
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
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/);
|
|
});
|
|
});
|