16d20063bf
Prevent keyboard viewport shifts from displacing mobile bottom bars while preserving iOS hide safeguards. - Split executor footer keyboard behavior into separate hide and pinning controls - Add keyboard-open CSS overrides to keep mobile nav/footer bottom at 0 instead of offsetting upward - Wire App to pass distinct keyboard props and expand component/CSS contract tests for keyboard-open classes and rule ordering Files changed: packages/dashboard/app/App.tsx | 3 ++- packages/dashboard/app/__tests__/mobile-bottom-bars-keyboard-layout.test.ts | 30 ++++++++++++++++++++++ packages/dashboard/app/components/ExecutorStatusBar.css | 6 +++++ packages/dashboard/app/components/ExecutorStatusBar.tsx | 14 +++++----- packages/dashboard/app/components/MobileNavBar.css | 3 ++- packages/dashboard/app/components/__tests__/ExecutorStatusBar.test.tsx | 17 ++++++++++++ packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx | 6 +++-- 7 files changed, 69 insertions(+), 10 deletions(-) Fusion-Task-Id: FN-5673 Fusion-Task-Lineage: 7c2dc749-214a-48ab-af58-5638ea27ae47
31 lines
1.5 KiB
TypeScript
31 lines
1.5 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?.[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?.[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);
|
|
});
|
|
});
|