fix(ui): keep Hub chat input from overlapping SessionInsights on paste#6719
fix(ui): keep Hub chat input from overlapping SessionInsights on paste#6719zanesq merged 2 commits intoblock:mainfrom
Conversation
…g paste Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>
There was a problem hiding this comment.
Pull request overview
Fixes a Hub layout issue where pasting/typing long text in the ChatInput could push other UI (e.g., bottom menu / SessionInsights content) off-screen or cause overlap.
Changes:
- Tightens flexbox sizing/overflow behavior across the sidebar/app layout to allow proper shrinking (
min-h-0,overflow-hidden,h-svh). - Caps Recent Chats list height in SessionInsights to prevent vertical growth.
- Adjusts Hub layout to constrain ChatInput and prevent it from taking over the full screen; moves ChatInput action buttons to bottom-right and increases right padding.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/desktop/src/components/ui/sidebar.tsx | Updates wrapper/inset flex sizing (min-h-0) and constrains overflow to prevent layout blowouts. |
| ui/desktop/src/components/sessions/SessionsInsights.tsx | Adds max height + hidden overflow for Recent Chats list to limit vertical expansion. |
| ui/desktop/src/components/Layout/AppLayout.tsx | Adds min-h-0 to ensure nested flex children can shrink correctly. |
| ui/desktop/src/components/Hub.tsx | Reworks Hub column layout and constrains ChatInput section height/overflow. |
| ui/desktop/src/components/ChatInput.tsx | Repositions inline action buttons and adjusts textarea right padding to avoid overlap with buttons. |
| toolCount={0} | ||
| onWorkingDirChange={setWorkingDir} | ||
| /> | ||
| <div className="flex-shrink-0 max-h-[50vh] min-h-0 overflow-hidden flex flex-col"> |
There was a problem hiding this comment.
Wrapping ChatInput in a max-h-[50vh] overflow-hidden container can clip ChatInput’s bottom controls (dir switcher / menus) on shorter window heights with no way to scroll to them. Consider using overflow-y-auto (or overflow-auto) for this wrapper, or removing the overflow constraint and relying on the textarea’s internal max-height/scrolling.
| <div className="flex-shrink-0 max-h-[50vh] min-h-0 overflow-hidden flex flex-col"> | |
| <div className="flex-shrink-0 max-h-[50vh] min-h-0 overflow-y-auto flex flex-col"> |
|
@Abhijay007 is this ready for review? |
No @zanesq, it’s only partially solved. I was able to fix the chat input size issue, but it’s still kind of overlapping with the sessionInsights section. Could you please take a look and help review why this is happening? I tried a few CSS tweaks, but they’re not working as expected, its still overlap there a bit, and it doesn’t look good from a UX perspective. I think if we can just eliminate the extra gap between the chat input and the session insights, especially for long text, this PR should be good to go. |
|
@Abhijay007 np will take a look! |
|
@Abhijay007 Thanks for jumping on this, really appreciate the progress. I reviewed it a bit and agree on the UX perspective. I didn’t open a PR earlier since I wasn’t sure about the UX call given how the layout is structured. @zanesq Maybe worth considering collapsing or hiding the upper section / sessionInsights while typing? Feels non-essential in that state and could avoid the overlap. |
|
Sorry been too busy to pick this up will take a look asap @Abhijay007 when you get a chance can you merge in main and resolve conflicts? |
Most probably tomorrow I resolve most of my Prs |
zanesq
left a comment
zanesq
left a comment
There was a problem hiding this comment.
LGTM! Verified working locally
…webtoken-10.3.0 * origin/main: (54 commits) Switch tetrate tool filtering back to supports_computer_use (#7024) feat(ui): add inline rename for chat sessions in sidebar (#6995) fix: handle toolnames without underscores (#7015) feat(claude-code): use stream-json protocol for persistent sessions (#7029) test(providers): add model listing to live provider suite (#7038) Agent added too much (#7036) fix(deps): bump tree-sitter to 0.26 and set sqlx default-features=false to fix RUSTSEC advisories (#7031) feat: add image support and improve error resilience for Codex (#7033) fix(providers): Azure OpenAI model listing 404 during configure (#7034) fix(deps): bump bat to 0.26.1 to resolve RUSTSEC-2026-0008 (#7021) Don't swallow Tetrate errors (#6998) docs: remove hardcoded_stuff links (#7016) fix(ui): keep Hub chat input from overlapping SessionInsights on paste (#6719) Clean up css (#6944) docs: aws bedrock bearer token auth (#6990) docs: extended custom provider headers support (#7012) feat(cli): add type-to-search filtering to select/multiselect dialogs (#6862) feat(ci): add cargo-audit workflow for scanning rust vulnerabilities (#6351) feat: add User-Agent header to MCP HTTP requests (#6988) chore(deps-dev): bump webpack from 5.102.1 to 5.105.0 in /ui/desktop (#6996) ... # Conflicts: # Cargo.lock
block#6719) Signed-off-by: Abhijay007 <Abhijay007j@gmail.com> Co-authored-by: Zane Staggs <zane@squareup.com>
block#6719) Signed-off-by: Abhijay007 <Abhijay007j@gmail.com> Co-authored-by: Zane Staggs <zane@squareup.com>
block#6719) Signed-off-by: Abhijay007 <Abhijay007j@gmail.com> Co-authored-by: Zane Staggs <zane@squareup.com>
3 participants
closes: #6673
Summary
Type of Change
AI Assistance
Testing
Screenshots/Demos (for UX changes)
Before:
After: