129e17d16c
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
39 lines
1.9 KiB
TypeScript
39 lines
1.9 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { loadAllAppCss } from "../test/cssFixture";
|
|
|
|
const css = loadAllAppCss();
|
|
|
|
describe("mobile bottom bars keyboard-open css contract", () => {
|
|
it("mobile nav keyboard-open rule pins bottom to 0", () => {
|
|
const match = css.match(/\.mobile-nav-bar\.mobile-nav-bar--keyboard-open,\s*\.mobile-nav-bar\.mobile-nav-bar--with-footer\.mobile-nav-bar--keyboard-open\s*\{([^}]*)\}/m);
|
|
expect(match).toBeTruthy();
|
|
expect(match![1]).toContain("bottom: 0");
|
|
});
|
|
|
|
it("mobile nav with-footer keyboard-open selector also pins bottom to 0", () => {
|
|
const match = css.match(/\.mobile-nav-bar\.mobile-nav-bar--keyboard-open,\s*\.mobile-nav-bar\.mobile-nav-bar--with-footer\.mobile-nav-bar--keyboard-open\s*\{([^}]*)\}/m);
|
|
expect(match).toBeTruthy();
|
|
expect(match![1]).toContain("bottom: 0");
|
|
});
|
|
|
|
it("mobile nav keyboard-open rule appears after with-footer rule", () => {
|
|
const withFooterPos = css.indexOf(".mobile-nav-bar--with-footer");
|
|
const keyboardPos = css.indexOf(".mobile-nav-bar.mobile-nav-bar--keyboard-open");
|
|
expect(withFooterPos).toBeGreaterThanOrEqual(0);
|
|
expect(keyboardPos).toBeGreaterThan(withFooterPos);
|
|
});
|
|
|
|
it("executor status bar keyboard-open rule pins bottom to 0", () => {
|
|
const match = css.match(/\.executor-status-bar\.executor-status-bar--keyboard-open\s*\{([^}]*)\}/m);
|
|
expect(match).toBeTruthy();
|
|
expect(match![1]).toContain("bottom: 0");
|
|
});
|
|
|
|
it("executor status bar keyboard-open rule appears after mobile base bottom rule", () => {
|
|
const mobileBasePos = css.indexOf("bottom: calc(var(--icb-bottom-offset, 0px) + var(--mobile-nav-height)");
|
|
const keyboardPos = css.indexOf(".executor-status-bar.executor-status-bar--keyboard-open");
|
|
expect(mobileBasePos).toBeGreaterThanOrEqual(0);
|
|
expect(keyboardPos).toBeGreaterThan(mobileBasePos);
|
|
});
|
|
});
|