test(FN-4414): complete Step 3 — add mobile dropdown clipping regression checks

Fusion-Task-Id: FN-4414
Fusion-Task-Lineage: 086c95f7-a84d-47b9-8d61-b701b5cc8984

packages/dashboard/app/components/__tests__/FileBrowser.css.test.ts

@@ -1,9 +1,39 @@
-import { readFile } from "node:fs/promises";
 import { describe, expect, it } from "vitest";
+import { loadAllAppCss } from "../../test/cssFixture";
 
-describe("FileBrowser.css token contract", () => {
-  it("does not use deprecated --radius alias token", async () => {
-    const css = await readFile("app/components/FileBrowser.css", "utf8");
-    expect(css).not.toMatch(/var\(--radius\)/);
+function extractMediaBlock(css: string, query: string): string {
+  const start = css.indexOf(`@media ${query}`);
+  if (start < 0) {
+    throw new Error(`Missing media query: ${query}`);
+  }
+  const open = css.indexOf("{", start);
+  let depth = 1;
+  let i = open + 1;
+  while (i < css.length && depth > 0) {
+    if (css[i] === "{") depth += 1;
+    else if (css[i] === "}") depth -= 1;
+    i += 1;
+  }
+  return css.slice(open + 1, i - 1);
+}
+
+describe("FileBrowser mobile dropdown regression", () => {
+  it("keeps mobile file-browser header overflow unclipped", () => {
+    const css = loadAllAppCss();
+    const mobileBlock = extractMediaBlock(css, "(max-width: 768px)");
+    const headerRuleMatch = mobileBlock.match(/\.file-browser-modal-header\s*\{[^}]*\}/);
+
+    expect(headerRuleMatch?.[0]).toBeTruthy();
+    expect(headerRuleMatch?.[0]).not.toMatch(/overflow\s*:\s*hidden/);
+  });
+
+  it("keeps workspace selector menu positioned above content", () => {
+    const css = loadAllAppCss();
+    const menuRuleMatch = css.match(/\.workspace-selector-menu\s*\{[^}]*\}/);
+
+    expect(menuRuleMatch?.[0]).toMatch(/position\s*:\s*(absolute|fixed)\s*;/);
+    const zIndexMatch = menuRuleMatch?.[0].match(/z-index\s*:\s*(\d+)/);
+    expect(zIndexMatch).toBeTruthy();
+    expect(Number(zIndexMatch?.[1])).toBeGreaterThanOrEqual(20);
   });
 });