From 03c8d21fdea738321f35f4e5ed2a7e5666c1c3ac Mon Sep 17 00:00:00 2001 From: yetone Date: Fri, 9 Oct 2026 02:05:06 +0800 Subject: [PATCH] gui: opening the folded context window on Routing no longer scrolls the page 4px; the folded card keeps the open card's padding, so its title stays where it is and the browser's scroll anchoring has nothing to follow (af798bd1's fold) The folded card had padding-block 10px against the open card's 14px, so the title moved down 4px as the card opened and scroll anchoring moved the page with it, at the top of the page too. A click never moves the page. Folded, the card is 50px instead of 42px, still one line. routing-ctx-fold now opens the card with the title in view and checks that scrollTop is the same and the title moved at most 1px. On af798bd1's assets it fails in Chromium and WebKit ("200 -> 204", "0 -> 4"); with this change it passes 3/3 in each. --- internal/gui/assets/context.css | 3 ++- internal/gui/tests/routing-ctx-fold.test.cjs | 13 +++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) 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");