fix(toolbar): fix scrollable file list overflow in ToolbarChangesPanel#1303
fix(toolbar): fix scrollable file list overflow in ToolbarChangesPanel#1303
Conversation
- Replace sticky bottom-0 footer with flex column layout + flex-shrink-0 to prevent workDir bar from overlapping the file list - Add flex-1 min-h-0 to scrollable file list div so overflow-y-auto works correctly in Firefox and other strict spec browsers - Move max-h-32 / overflow / padding handling into ToolbarChangesPanel itself; parent container exempts the changes tab from these classes Entire-Checkpoint: 635c578dec40
- Add toolbar scrollable file list overflow fix to CHANGELOG.md - Sync English changelog from root CHANGELOG.md - Update kimi-web.md (zh+en): add todo list in prompt toolbar, Cmd/Ctrl+Click on new-session buttons, and URL action parameters section for external integrations Entire-Checkpoint: b0621742aaa7
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
Signed-off-by: Young E <49367723+YoungY620@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Fixes layout/scroll behavior in the prompt toolbar’s “changes” panel so the file list scrolls correctly within the 128px max height and the workDir footer no longer overlaps content.
Changes:
- Refactors
ToolbarChangesPanelinto a flex column with a dedicated scroll container (flex-1 min-h-0) and replacessticky bottom-0withflex-shrink-0for the footer. - Adjusts the shared expanded-panel wrapper so
max-h-32 overflow-y-auto py-1 px-0.5apply only to non-changestabs. - Updates changelogs and reference docs to reflect the UI improvements.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| web/src/features/chat/components/prompt-toolbar/toolbar-changes.tsx | Introduces a dedicated flex layout + scroll container and changes footer positioning strategy. |
| web/src/features/chat/components/prompt-toolbar/index.tsx | Makes the expanded panel wrapper conditional so the changes tab manages its own scrolling. |
| docs/zh/release-notes/changelog.md | Adds an unreleased entry for the toolbar changes panel overflow fix. |
| docs/zh/reference/kimi-web.md | Updates Web UI docs with new toolbar capabilities and URL action params section. |
| docs/en/release-notes/changelog.md | Adds an unreleased entry for the toolbar changes panel overflow fix. |
| docs/en/reference/kimi-web.md | Updates Web UI docs with new toolbar capabilities and URL action params section. |
| CHANGELOG.md | Adds an unreleased entry for the toolbar changes panel overflow fix. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <span className="truncate text-muted-foreground" title={file.path}> | ||
| {file.path} | ||
| </span> |
There was a problem hiding this comment.
truncate inside a flex row typically won’t actually truncate unless the truncating element is allowed to shrink (e.g., min-w-0 and often flex-1). As written, long file.path values can still force horizontal overflow rather than ellipsize. Consider adding min-w-0 (and flex-1 if you want it to take remaining space) to this span so paths reliably truncate.
| <FolderOpenIcon className="size-3 flex-shrink-0 text-muted-foreground/70" /> | ||
| <span className="truncate text-muted-foreground/70">{workDir}</span> | ||
| <div className="flex-shrink-0 hidden lg:block opacity-0 group-hover/folder:opacity-100 transition-opacity duration-150"> |
There was a problem hiding this comment.
Same truncation issue as above: this truncate span is in a flex container, but without min-w-0 it may not shrink, so long workDir values can overflow the panel horizontally. Add min-w-0 (and/or make it flex-1) to ensure ellipsis works consistently.
Related Issue
N/A
Description
The
ToolbarChangesPanelhad two layout bugs:sticky bottom-0, which caused it to overlap the file list inside the scrollable parent container.min-h-0, sooverflow-y-autodidn't work in Firefox and other spec-strict browsers — the panel would grow beyond themax-h-32(128px) limit.Changes:
index.tsx: Movemax-h-32 overflow-y-auto py-1 px-0.5out of the shared panel wrapper; apply them only for non-changestabs. Thechangestab now manages its own scroll container.toolbar-changes.tsx: Wrap content in aflex flex-col max-h-32container. The scrollable file list getsflex-1 min-h-0sooverflow-yworks correctly cross-browser. The workDir footer usesflex-shrink-0instead ofsticky bottom-0to stay pinned at the bottom.Checklist
make gen-changelogto update the changelog.make gen-docsto update the user documentation.