cd1a06d66b
- Replace viewport-height CSS with percentage-based fill to prevent mobile footer overlap - Add regression tests for mobile footer-safe layout in dashboard-footer-mobile-layout.test.ts - Add App.test.tsx coverage for viewport height behavior - Document mobile layout fix in README
108 lines
4.0 KiB
TypeScript
108 lines
4.0 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { readFileSync } from "fs";
|
|
import { resolve } from "path";
|
|
|
|
/**
|
|
* Stylesheet regression test for FN-824: Mobile footer-safe layout.
|
|
*
|
|
* Parses `packages/dashboard/app/styles.css` and asserts that the mobile
|
|
* `@media (max-width: 768px)` rules for `.board` do NOT use viewport-height
|
|
* sizing (`100vh` / `100dvh`) that would bypass the
|
|
* `.project-content--with-footer` padding contract.
|
|
*
|
|
* ## Why this matters
|
|
*
|
|
* `.project-content--with-footer` reserves space for the fixed
|
|
* `ExecutorStatusBar` footer via `padding-bottom: var(--executor-footer-height)`.
|
|
* If `.board` sizes itself using `calc(100dvh - X)` instead of filling its
|
|
* parent with `height: 100%`, the board extends beneath the footer bar,
|
|
* making the bottom cards partially hidden and untappable on mobile.
|
|
*
|
|
* This test ensures no future change reintroduces viewport-height sizing
|
|
* for the mobile board.
|
|
*/
|
|
|
|
describe("dashboard-footer-mobile-layout", () => {
|
|
const cssPath = resolve(__dirname, "../styles.css");
|
|
const cssContent = readFileSync(cssPath, "utf-8");
|
|
|
|
/** Extract all content inside @media (max-width: 768px) blocks. */
|
|
function extractMobileMediaBlocks(content: string): string {
|
|
const blocks: string[] = [];
|
|
const regex = /@media\s*\(\s*max-width:\s*768px\s*\)\s*\{/g;
|
|
let match;
|
|
|
|
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);
|
|
|
|
// ── Board must NOT use viewport-height sizing ────────────────────────
|
|
|
|
it("mobile .board does not use calc(100dvh - ...) for height", () => {
|
|
// This was the FN-824 bug: mobile board had height: calc(100dvh - 57px)
|
|
// which ignored the footer-safe wrapper's padding-bottom reservation.
|
|
const hasDvhCalc = mobileCss.match(
|
|
/\.board\s*\{[^}]*height\s*:\s*calc\s*\(\s*100dvh/,
|
|
);
|
|
expect(hasDvhCalc).toBeNull();
|
|
});
|
|
|
|
it("mobile .board does not use calc(100vh - ...) for height", () => {
|
|
const hasVhCalc = mobileCss.match(
|
|
/\.board\s*\{[^}]*height\s*:\s*calc\s*\(\s*100vh/,
|
|
);
|
|
expect(hasVhCalc).toBeNull();
|
|
});
|
|
|
|
it("mobile .board does not use 100dvh or 100vh directly for height", () => {
|
|
const hasDirectVh = mobileCss.match(
|
|
/\.board\s*\{[^}]*height\s*:\s*100dvh/,
|
|
);
|
|
const hasDirectVh2 = mobileCss.match(
|
|
/\.board\s*\{[^}]*height\s*:\s*100vh/,
|
|
);
|
|
expect(hasDirectVh).toBeNull();
|
|
expect(hasDirectVh2).toBeNull();
|
|
});
|
|
|
|
// ── Footer-safe wrapper contract ─────────────────────────────────────
|
|
|
|
it("mobile .project-content--with-footer sets a footer height token", () => {
|
|
// The mobile media query should override the footer height token
|
|
expect(mobileCss).toMatch(
|
|
/\.project-content--with-footer\s*\{[^}]*--executor-footer-height/,
|
|
);
|
|
});
|
|
|
|
it("desktop .project-content--with-footer uses padding-bottom for footer space", () => {
|
|
// Verify the desktop rule exists and uses the variable
|
|
const desktopMatch = cssContent.match(
|
|
/\.project-content--with-footer\s*\{[^}]*padding-bottom\s*:\s*var\(--executor-footer-height\)/,
|
|
);
|
|
expect(desktopMatch).not.toBeNull();
|
|
});
|
|
|
|
it("desktop .project-content--with-footer sets --executor-footer-height to a non-zero value", () => {
|
|
const desktopMatch = cssContent.match(
|
|
/\.project-content--with-footer\s*\{[^}]*--executor-footer-height:\s*([0-9]+px)/,
|
|
);
|
|
expect(desktopMatch).not.toBeNull();
|
|
const value = desktopMatch![1];
|
|
expect(value).not.toBe("0px");
|
|
});
|
|
});
|