diff --git a/internal/gui/assets/context.css b/internal/gui/assets/context.css index afaf82fa..97799ae0 100644 --- a/internal/gui/assets/context.css +++ b/internal/gui/assets/context.css @@ -117,7 +117,8 @@ i.dot.free { background: var(--k-free); box-shadow: inset 0 0 0 1px color-mix(in .ctx-card.shut .ctx-fold .tw svg { transform: rotate(-90deg); } .ctx-short { display: none; flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; } .ctx-card.shut .ctx-short { display: inline; } -.ctx-card.shut { padding-block: 10px; } +/* the padding is the open card's, so the title stays where it is when it + opens and the page doesn't follow it (it moved 4px with a 10px one) */ .ctx-card.shut > :not(.ctx-head) { display: none; } :where(.ctx-card.shut.max420) .ctx-model { display: none; } diff --git a/internal/gui/tests/routing-ctx-fold.test.cjs b/internal/gui/tests/routing-ctx-fold.test.cjs index fd09491e..a1286f65 100644 --- a/internal/gui/tests/routing-ctx-fold.test.cjs +++ b/internal/gui/tests/routing-ctx-fold.test.cjs @@ -137,8 +137,17 @@ for (const engine of (process.env.BROWSER ? [process.env.BROWSER] : ["chromium", await page.waitForTimeout(500); assert.equal((await look(page)).shut, true, "it stays folded after the page comes back"); - // opened again, it is all there - await fold(page); + // opened again, it is all there; its title stays where it was and + // the page doesn't follow it (a click never moves the page: with + // a folded padding of its own, it moved 4px) + const b = page.locator(".rt-ctx .ctx-fold"); + await click(page, page.locator(".rt-ctx .ctx-short")); + const before = await b.evaluate((e) => [e.getBoundingClientRect().top, document.querySelector("#view-routing").scrollTop]); + await b.click(); + await page.waitForTimeout(800); + const moved = await b.evaluate((e) => [e.getBoundingClientRect().top, document.querySelector("#view-routing").scrollTop]); + assert.equal(moved[1], before[1], `opening it doesn't scroll the page: ${before} -> ${moved}`); + assert(Math.abs(moved[0] - before[0]) <= 1, `its title stays under the pointer: ${before} -> ${moved}`); const again = await look(page); assert.equal(again.shut, false); assert.equal(again.expanded, "true");