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

33
app/globals.css
View file

@ -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;