fix(widget): stop the chat history list squashing rows instead of scrolling - #125
Closed
vaibhav8a wants to merge 1 commit into
Closed
fix(widget): stop the chat history list squashing rows instead of scrolling#125vaibhav8a wants to merge 1 commit into
vaibhav8a wants to merge 1 commit into
Conversation
…olling .thread-drawer is a flex column, so .thread-drawer-head, .thread-new and .thread-item inherited flex-shrink: 1 and the browser compressed them to fit rather than letting .thread-list overflow. At ~20 conversations the rows fell from their natural 36px to 24.5px with no scrollbar at all; by 45 they were 19px -- padding only, titles clipped top and bottom. Opt those three out with flex: 0 0 auto, so rows keep their natural height and the list's existing overflow-y: auto does the scrolling. Rebuilt static/widget.js, which is committed and carries the bundled CSS. Closes extra-org#61
Author
|
Closing this — #86 has been open since 2 August with the same fix ( Apologies for the noise — same miss as #123. I was filtering the issue list on assignee and open-PR branch names, which doesn't catch a PR that references the issue without naming it in the branch. I'm checking @AmitAvital1 no action needed on your side. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #61.
Change
Exactly the fix the issue proposes, in
widget/styles/styles.ts:.thread-draweris a flex column, so those three inheritedflex-shrink: 1and the browser compressed them to fit instead of letting.thread-listoverflow and use theoverflow-y: autoit already declares.src/agent_manager/api/static/widget.jsis rebuilt withnpm run build:widget, since it's committed and carries the bundled CSS — the fix would otherwise not reach anyone serving the prebuilt widget.Measured
I rebuilt your isolated repro rather than taking the numbers on trust: real Chromium via the repo's Playwright, panel at 440x680, CSS read straight out of
styles.tsso the measurement can't drift from what ships.That lines up with your table (24.9px / 20px; the ~1px differences are font rendering on this machine). The row height is now constant across 5, 20 and 45 — which is the actual property being fixed: height no longer depends on how many conversations exist.
Checks
The
.thread-itemellipsis behaviour is untouched — this only stops the vertical compression, which is the halftext-overflownever covered.