shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refocus responsive layouts on compact desktop use
All checks were successful
Deploy Sokko G / deploy (push) Successful in 19s
Details

Browse source
This commit is contained in:
Shinuwa 2026-10-05 15:47:46 +02:00
parent 96d058293d
commit 0ac1a0974e
27 changed files with 610 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

10
e2e/nds-patterns.spec.js
View file

@ -69,7 +69,7 @@ test("badges, notices, progress and chips expose meaningful visual states", asyn
await expect(chip.locator("img")).toHaveCSS("height", "16px");
});
for (const width of [1280, 390]) {
for (const width of [1440, 1280, 768]) {
test(`overlays fit, scroll internally and preserve stacking at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 800 });
await mountStyles(page, `<div class="confirm-modal-root">
@ -88,17 +88,17 @@ for (const width of [1280, 390]) {
await page.locator("body").evaluate((element) => element.classList.add("is-modal-open"));
await expect(page.locator("body")).toHaveCSS("overflow", "hidden");
await mountStyles(page, `<div class="drawer" aria-hidden="false">
await mountStyles(page, `<div class="drawer ${width < 1440 ? "is-compact" : ""}" aria-hidden="false">
<section class="drawer-panel nds-drawer-panel"><div style="height:1400px">Drawer</div></section>
<div class="drawer-resize-handle nds-drawer-resize-handle"></div></div>`);
const drawer = page.locator(".drawer-panel");
await expectFits(drawer);
await expect(drawer).toHaveCSS("top", width <= 760 ? "110px" : "68px");
await expect(drawer).toHaveCSS("top", "68px");
await expect(drawer).toHaveCSS("position", "fixed");
await expect(drawer).toHaveCSS("overflow-y", "auto");
await expect(drawer).toHaveCSS("backdrop-filter", "blur(10px)");
await expect(drawer).toHaveCSS("width", width < 700 ? `${width}px` : "700px");
await expect(page.locator(".drawer-resize-handle")).toHaveCSS("display", width < 700 ? "none" : "block");
await expect(drawer).toHaveCSS("width", width < 1440 ? `${width - (width <= 1024 ? 72 : 248)}px` : "700px");
await expect(page.locator(".drawer-resize-handle")).toHaveCSS("display", width < 1440 ? "none" : "block");
await page.locator(".drawer").evaluate((element) => element.setAttribute("aria-hidden", "true"));
await expect(drawer).toBeHidden();