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:
parent
8a3bef0add
commit
05e0fdcc86
4 changed files with 55 additions and 9 deletions
|
|
@ -373,8 +373,12 @@ export function Sidebar() {
|
|||
isCollapsed ? "w-[84px]" : "w-[268px]",
|
||||
)}
|
||||
>
|
||||
{/* One tall inset glass panel, so the ice scene shows around it. */}
|
||||
<div className="sidebar-surface flex min-h-0 flex-1 flex-col px-2.5 py-3">
|
||||
{/* One tall inset glass panel, so the ice scene shows around it. The
|
||||
min-w-0 keeps it inside the rail: as a flex item its automatic
|
||||
minimum size is the content's min-content width, and wide content
|
||||
(e.g. the chat list's search input) would otherwise stretch the
|
||||
panel past the rail and paint over the page. */}
|
||||
<div className="sidebar-surface flex min-h-0 min-w-0 flex-1 flex-col px-2.5 py-3">
|
||||
<NavContent collapsed={isCollapsed} />
|
||||
</div>
|
||||
</aside>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue