From 303e73f555c10ddf138bad60e81b693a66f0678e Mon Sep 17 00:00:00 2001 From: Martin Dvorak Date: Wed, 14 Oct 2026 18:06:21 +0000 Subject: [PATCH] Chat chrome ends at the rail with a rounded corner 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. --- README.md | 18 ++++++++++-------- app/globals.css | 33 +++++++++++++++++---------------- package.json | 2 +- public/sw.js | 2 +- tests/chat-test.mjs | 28 +++++++++++++++++----------- 5 files changed, 46 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index e05e0fe..3919fa1 100644 --- a/README.md +++ b/README.md @@ -1435,14 +1435,16 @@ Things I chose while building, with the reasoning: navigations as the offline shell — a typo'd URL used to write the error page into the shell cache. -87. **Chat's chrome docks into the rail (the sidebar seam).** The chat header and composer are - full-bleed bands inside the main pane; at desktop widths that pane starts right at the sidebar, - so both bands ended in a hard vertical edge beside the floating rail card — the 12px gutter - showed the raw scene, and the bands' fill + backdrop blur made it read as a color step at the - seam, with their hairlines starting in mid-air at that edge. Both bands now reach the card's - right edge (the rail's own 12px padding, expanded or collapsed) and their hairlines are inset - to the content box instead of touching the seam; phones keep the plain full-width borders. The - chat suite pins the dock (band edge === card edge, zeroed band borders, inset `::after` +87. **Chat's chrome ends at the rail with a rounded corner (the sidebar seam).** The chat header + and composer are full-bleed bands inside the main pane; at desktop widths that pane starts right + at the sidebar, so both bands ended in a hard vertical edge beside the floating rail card — the + 12px gutter showed the raw scene and the bands' fill + blur made it read as a color step at the + seam. Docking them into the card did not fix it either ("this seam still looks bad" — a straight + cut is still a straight cut): both bands now keep the rail's own 12px gutter and end in the + card's 1.5rem radius on their left side, so the ending is legible as deliberate, with their + hairlines inset instead of touching the seam (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 pins the geometry (12px gutter, 24px left corners, zeroed band borders, inset `::after` hairlines). The "Chat is set to ignore notes text" banner went away with it — the scope chip already says what the chat may read. diff --git a/app/globals.css b/app/globals.css index b6c3a47..472c023 100644 --- a/app/globals.css +++ b/app/globals.css @@ -691,7 +691,7 @@ /* Chat header: the same glass as the cards, a touch more fill — its title and scope line sit directly over the sky. At lg its divider is the inset hairline - the desktop docking block below draws (::after), so it never hits the seam. */ + the desktop block below draws (::after), so it never hits the seam. */ .aero .chat-header { background-color: rgb(232 248 255 / 0.4); border-bottom: 1px solid rgb(255 255 255 / 0.6); @@ -711,19 +711,19 @@ background: rgb(255 255 255 / 0.65); } -/* Desktop: the chat chrome docks into the rail. The header and the composer - are full-bleed bands inside the main pane; at lg that pane starts exactly - at the sidebar, so both bands used to stop in a hard vertical edge beside - the floating rail card — the scene showed through the 12px gutter and the - bands' own fill/blur made it read as a color step at the seam. They now - reach the card's right edge (the rail's own 12px padding, in the expanded - and the collapsed state alike) and their hairlines span the content box - instead of starting in mid-air at the seam. */ +/* Desktop: the chat chrome ends at the rail with a rounded corner. 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 bands now stop at the seam with the rail card's own + 1.5rem radius on their left end, so the ending reads as deliberate, and their + hairlines span the content box instead of touching the seam. Phones keep the + plain full-width borders. */ @media (min-width: 1024px) { .chat-header { - margin-left: -0.75rem; - padding-left: 1.75rem; border-bottom: 0; + border-start-start-radius: 1.5rem; + border-end-start-radius: 1.5rem; } .aero .chat-header { border-bottom: 0; @@ -731,17 +731,18 @@ .chat-header::after { content: ""; position: absolute; - left: 1.75rem; + left: 1.5rem; right: 1rem; bottom: 0; height: 1px; background: var(--glass-border); } - .chat-composer { - margin-left: -0.75rem; + .chat-composer, + .chat-composer-band { + border-start-start-radius: 1.5rem; + border-end-start-radius: 1.5rem; } .chat-composer-band { - padding-left: 3.25rem; border-top: 0; } .aero .chat-composer { @@ -750,7 +751,7 @@ .chat-composer::after { content: ""; position: absolute; - left: 3.25rem; + left: 2.5rem; right: 2.5rem; top: 0; height: 1px; diff --git a/package.json b/package.json index a3a7213..8d9ec00 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "freezmo", - "version": "0.5.6", + "version": "0.5.7", "private": true, "license": "GPL-3.0-only", "scripts": { diff --git a/public/sw.js b/public/sw.js index 67ea82f..b2f3991 100644 --- a/public/sw.js +++ b/public/sw.js @@ -9,7 +9,7 @@ * * Bumping CACHE_VERSION is how a new deploy invalidates old assets. */ -const CACHE_VERSION = "freezmo-v78"; +const CACHE_VERSION = "freezmo-v79"; const SHELL_CACHE = `${CACHE_VERSION}-shell`; const ASSET_CACHE = `${CACHE_VERSION}-assets`; diff --git a/tests/chat-test.mjs b/tests/chat-test.mjs index 8e3591d..357ad42 100644 --- a/tests/chat-test.mjs +++ b/tests/chat-test.mjs @@ -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" &&