Fix sidebar rail overflow on the chat page

The content offset was fine — the rail's glass panel was the problem. As a
flex-1 item in the row-flex aside, the panel's automatic minimum size
(min-width: auto) is its content's min-content width. The chat list's
search input (an <input> defaults to size=20) has a ~192px intrinsic
width, which with the New chat button stretched the panel to 345px — 89px
past the 268px rail — where it painted over the chat page: the header
title, the composer placeholder ("sk about your notes...") and the
context chip ("ts").

- min-w-0 on the panel so the rail width always wins and wide content
  truncates instead (the input and list rows already shrink/truncate).
- Chat suite: assert the panel stays inside the rail and the main content
  starts after it, expanded and collapsed (the old checks counted
  elements, never their boxes — this is what slipped through).
- README: history bullet + decision 49. SW -> freezmo-v36.

Verified on the dev instance and a production build: panel 244px inside
the 268px rail (60px in the 84px collapsed rail) at 1024-1920, content
starts after the rail, all sidebar pages unchanged, dark + light, and
the full e2e (12/12 suites, 516 checks).
This commit is contained in:
Martin Dvořák 2026-10-11 21:04:15 +00:00
commit 05e0fdcc86
4 changed files with 55 additions and 9 deletions

View file

@ -256,6 +256,38 @@ try {
await desktop.page.waitForTimeout(1200);
check("desktop: chat route opens with the sidebar", desktop.page.url().endsWith("/chat") && (await desktop.page.locator("aside").count()) >= 1);
check("desktop: no tab bar on chat", (await desktop.page.locator("nav.tabbar").count()) === 0);
/* The rail must not paint over the page: its glass panel stays inside the
rail and the chat content starts after it. Regression: a wide chat list
stretched the panel (flex item min-width: auto) past the rail and
covered the header title, composer and context chip. */
const railMetrics = () =>
desktop.page.evaluate(() => {
const aside = document.querySelector("aside[aria-label]");
const panel = aside?.firstElementChild;
const main = document.querySelector("main");
if (!aside || !panel || !main) return null;
const a = aside.getBoundingClientRect();
const p = panel.getBoundingClientRect();
const m = main.getBoundingClientRect();
return {
panelInside: p.right <= a.right - 1,
contentClear: m.left >= a.right - 1,
gap: Math.round(m.left - p.right),
overflowing: [...panel.querySelectorAll("*")].some((el) => el.getBoundingClientRect().right > p.right + 1),
};
});
const expandedRail = await railMetrics();
check("desktop: sidebar panel stays inside the rail", expandedRail !== null && expandedRail.panelInside && !expandedRail.overflowing);
check("desktop: chat content starts after the sidebar", expandedRail !== null && expandedRail.contentClear && expandedRail.gap > 0);
await desktop.page.getByRole("button", { name: "Collapse sidebar" }).click();
await desktop.page.waitForTimeout(400);
const collapsedRail = await railMetrics();
check("desktop: collapsed rail also stays inside and clear", collapsedRail !== null && collapsedRail.panelInside && !collapsedRail.overflowing && collapsedRail.contentClear);
await desktop.page.getByRole("button", { name: "Expand sidebar" }).click();
await desktop.page.waitForTimeout(400);
await desktop.context.close();
const phone = await makePage(browser);