Add viewport-offset handling so mobile bottom bars stay anchored while virtual keyboards resize the visual viewport. - add a shared viewportOffset utility to compute keyboard-related visual viewport compensation - update dashboard app bootstrap/index logic to apply compensation variables for pinned footer/nav layout - extend mobile keyboard layout coverage with dedicated viewport compensation and bottom-bar tests - document the keyboard/pinned-bar behavior update in dashboard guide Files changed: docs/dashboard-guide.md | 2 +- .../mobile-bottom-bars-keyboard-layout.test.ts | 12 ++- .../viewport-compensation-keyboard.test.ts | 24 ++++++ packages/dashboard/app/index.html | 39 +++++++++- .../app/utils/__tests__/viewportOffset.test.ts | 86 ++++++++++++++++++++++ packages/dashboard/app/utils/viewportOffset.ts | 64 ++++++++++++++++ 6 files changed, 223 insertions(+), 4 deletions(-) Fusion-Task-Id: FN-5702 Fusion-Task-Lineage: be47ad0c-82df-4c38-9577-94c2eee49a0e
25 lines
1010 B
TypeScript
25 lines
1010 B
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { readFileSync } from "node:fs";
|
|
import { resolve } from "node:path";
|
|
|
|
describe("index.html viewport compensation keyboard guard", () => {
|
|
const indexHtml = readFileSync(resolve(__dirname, "../index.html"), "utf8");
|
|
|
|
it("contains keyboard-focus predicate in inline compensation script", () => {
|
|
expect(indexHtml).toContain("isKeyboardFocusableElement");
|
|
expect(indexHtml).toContain("document.activeElement");
|
|
expect(indexHtml).toContain("HTMLTextAreaElement");
|
|
expect(indexHtml).toContain("HTMLInputElement");
|
|
});
|
|
|
|
it("contains pinch-zoom scale guard", () => {
|
|
expect(indexHtml).toContain("vvScale <= 1.01");
|
|
});
|
|
|
|
it("contains viewportOffset.ts sync marker and keyboard shrink clamp", () => {
|
|
expect(indexHtml).toContain("Keep in sync with packages/dashboard/app/utils/viewportOffset.ts");
|
|
expect(indexHtml).toContain("keyboardShrink");
|
|
expect(indexHtml).toContain("rawBottomOffset - keyboardShrink");
|
|
});
|
|
});
|