dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chat chrome ends at the rail with a rounded corner

Browse source 
Docking the two chat bands into the rail card removed the floating cut
but the edge stayed a straight vertical line - still a seam ("this
still looks bad"). Both bands now keep the rail's own 12px gutter and
end in the rail card's 1.5rem radius on their left side, so the ending
reads as deliberate; the header divider spans the flat part of the
bottom edge, from the corner curve inward. Phones keep the plain
full-width borders.

The chat suite now pins the geometry: 12px gutter at the seam, 24px
left corners on both bands, zeroed band borders, inset ::after
hairlines. Chat 104/104, mobile 126/126, regression 50/50.

Version 0.5.7, SW -> freezmo-v79.
This commit is contained in:
Martin Dvořák 2026-10-14 18:06:21 +00:00
commit 303e73f555
5 changed files with 46 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

28
tests/chat-test.mjs
View file

@ -291,12 +291,13 @@ try {
await desktop.page.waitForTimeout(400);
check("desktop: AI disclaimer under the composer", await desktop.page.getByText("Freezmo uses AI and can make mistakes").isVisible());
/* The chat chrome docks into the rail: the header and the composer used to
end in a hard vertical edge beside the floating rail card (the scene
showed through the gutter and their fill/blur made it read as a color
step at the seam), and their hairlines started right at that edge. Both
bands now reach the card's right edge and their hairlines are inset to
the content box. */
/* The chat chrome ends at the rail with the rail card's own radius: the
header and the composer are full-bleed bands inside the main pane, which
starts right at the sidebar — a straight vertical edge there read as a
hard cut (the 12px gutter showed the raw scene and the bands' fill/blur
made it a color step at the seam). Both now keep the rail's 12px gutter
and end in a 1.5rem rounded corner on their left side, with their
hairlines inset instead of touching the seam. */
const seam = await desktop.page.evaluate(() => {
const card = document.querySelector(".sidebar-surface");
const header = document.querySelector(".chat-header");
@ -304,23 +305,28 @@ try {
if (!card || !header || !band) return null;
const line = (el) => {
const cs = getComputedStyle(el, "::after");
return { content: cs.content, left: parseFloat(cs.left), right: parseFloat(cs.right) };
return { content: cs.content, left: parseFloat(cs.left) };
};
const hcs = getComputedStyle(header);
return {
cardRight: Math.round(card.getBoundingClientRect().right),
headerLeft: Math.round(header.getBoundingClientRect().left),
bandLeft: Math.round(band.getBoundingClientRect().left),
headerBorder: getComputedStyle(header).borderBottomWidth,
headerRadius: hcs.borderStartStartRadius,
headerEndRadius: hcs.borderEndStartRadius,
headerBorder: hcs.borderBottomWidth,
bandBorder: getComputedStyle(band).borderTopWidth,
headerLine: line(header),
bandLine: line(band.parentElement),
};
});
check(
"desktop: chat chrome docks into the rail (no seam)",
"desktop: chat chrome ends in a rounded corner at the seam",
seam !== null &&
seam.headerLeft === seam.cardRight &&
seam.bandLeft === seam.cardRight &&
seam.headerLeft === seam.cardRight + 12 &&
seam.bandLeft === seam.cardRight + 12 &&
seam.headerRadius === "24px" &&
seam.headerEndRadius === "24px" &&
seam.headerBorder === "0px" &&
seam.bandBorder === "0px" &&
seam.headerLine.content !== "none" &&