fix: fixed blabsy chat overflow. #285
Conversation
WalkthroughLayout-only updates to chat components adjust container heights, padding, and overflow classes. The chat header gains h-fit. Chat layout switches to min-h-full with max widths, adjusts column heights, and sets the right pane height to h-[calc(100vh-4rem)]. No logic, exports, or public APIs changed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
platforms/blabsy/src/components/chat/chat-window.tsx (1)
209-209: Header: prefer shrink-0 over h-fit for safer cross-browser behaviorh-fit can be inconsistent in flex parents across browsers. shrink-0 reliably prevents the header from collapsing and pairs well with a scrollable content area below.
Apply:
-<div className='flex h-fit items-center justify-between gap-3 border-b border-gray-200 p-4 dark:border-gray-800'> +<div className='flex shrink-0 items-center justify-between gap-3 border-b border-gray-200 p-4 dark:border-gray-800'>Manual check:
- Resize window and add many messages; ensure the header never overlaps or collapses and the message list remains scrollable on Safari/iOS and Chromium.
platforms/blabsy/src/components/chat/chat.tsx (2)
6-6: min-h-full can be fragile without a height-defined parentSwitching from min-h-screen to min-h-full relies on an ancestor having a defined height. If none does, main won’t fill the viewport; this can influence inner height math and overflow.
Options:
- Safer default:
-<main className='min-h-full w-full max-w-5xl pt-8'> +<main className='min-h-screen w-full max-w-5xl pt-8'>
- Mobile-friendly variant (better with dynamic browser UI):
-<main className='min-h-full w-full max-w-5xl pt-8'> +<main className='min-h-dvh w-full max-w-5xl pt-8'>Manual check:
- Verify full-height behavior across routes/layouts and on iOS Safari (dynamic toolbars).
11-11: Right pane height duplicates parent height; prefer h-full or use dvh for mobileThe grid already sets h-[calc(100vh-4rem)]. Setting the same on this child is redundant and can cause maintenance drift. Use h-full to inherit the grid’s height. If you need viewport-aware height directly on the pane, prefer dvh to handle mobile browser chrome.
Option A (inherit from grid):
-<div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'> +<div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>Option B (mobile-friendly explicit height):
-<div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'> +<div className='h-[calc(100dvh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>Manual check:
- Ensure no double scrollbars, and the message list remains scrollable but contained.
- Validate the “4rem” offset reflects real header/padding; mismatch can cause subtle off-by-some-px issues.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
platforms/blabsy/src/components/chat/chat-window.tsx(2 hunks)platforms/blabsy/src/components/chat/chat.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
platforms/blabsy/src/components/chat/chat.tsx (1)
platforms/blabsy/src/components/chat/chat-list.tsx (1)
ChatList(18-160)
| )} | ||
| </div> | ||
| <div className='flex-1 overflow-y-auto p-4'> | ||
| <div className='flex-1 p-4 overflow-y-auto'> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Ensure the message list can actually scroll in flex/grid by adding min-h-0
In many flex/grid stacks, a scrollable child must have min-h-0 to avoid expanding past its container. This prevents the “infinite growth” overflow.
Apply:
-<div className='flex-1 p-4 overflow-y-auto'>
+<div className='flex-1 min-h-0 p-4 overflow-y-auto overscroll-contain'>Manual check:
- With long message histories, confirm the list scrolls inside the pane (no page-level scroll bleed), especially on iOS Safari.
🏁 Script executed:
#!/bin/bash
set -e
# Locate chat-window.tsx
file=$(fd --hidden --glob "chat-window.tsx")
echo "File: $file"
# Show context around the scrollable div
rg -n "flex-1 p-4 overflow-y-auto" -A 10 -B 10 "$file"Length of output: 1617
🏁 Script executed:
#!/bin/bash
# Show surrounding context for the scrollable div to inspect parent containers
sed -n '200,350p' platforms/blabsy/src/components/chat/chat-window.tsxLength of output: 8786
Add min-h-0 and overscroll-contain to the scrollable message pane
To ensure the flex‐item truly scrolls within its parent (and prevent page‐level scroll bleed on iOS), reset its min-height and contain its overscroll:
• File: platforms/blabsy/src/components/chat/chat-window.tsx (around line 266)
• Update the wrapper div for the message list:
- <div className='flex-1 p-4 overflow-y-auto'>
+ <div className='flex-1 min-h-0 p-4 overflow-y-auto overscroll-contain'>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='flex-1 p-4 overflow-y-auto'> | |
| <div className='flex-1 min-h-0 p-4 overflow-y-auto overscroll-contain'> |
🤖 Prompt for AI Agents
In platforms/blabsy/src/components/chat/chat-window.tsx around line 266, the
scrollable message pane div lacks the Tailwind classes to allow correct flex
scrolling and to contain overscroll on touch devices; update the wrapper div's
className to include min-h-0 and overscroll-contain (e.g., add those two classes
alongside existing flex-1 p-4 overflow-y-auto) so the pane resets min-height and
prevents page-level scroll bleed on iOS.
| <main className='min-h-full w-full max-w-5xl pt-8'> | ||
| <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'> | ||
| <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'> | ||
| <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Sidebar height: max-h-full may collapse and break inner scrolling
Using max-h-full allows the container to shrink to content height, which can prevent its children (e.g., a scrollable chat list) from getting a definite height. h-full keeps the sidebar matched to the grid row height so the inner scroll area works reliably.
Apply:
-<div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+<div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>If the ChatList needs an explicit flex context to contain its own scrollable region, consider:
- Add min-h-0 and overflow-hidden to this wrapper, and ensure the immediate child providing overflow-y-auto has min-h-0 as well.
Manual check:
- Populate many chats and confirm the left list scrolls inside the column (not the whole page).
🏁 Script executed:
#!/bin/bash
# Show usage of max-h-full and nearby context in chat.tsx
rg -n "max-h-full" -C5 platforms/blabsy/src/components/chat/chat.tsx
echo
echo "==== Top of file (1–50) ===="
sed -n '1,50p' platforms/blabsy/src/components/chat/chat.tsxLength of output: 1520
🏁 Script executed:
#!/bin/bash
# Find and display the ChatList component implementation
rg -l "ChatList" -g "*.tsx" platforms/blabsy/src/components/chat | xargs -I {} sed -n '1,200p' {}Length of output: 9006
Ensure ChatList container fills its parent and enables inner scrolling
Replace the first column wrapper’s max-h-full with h-full so the chat list always spans the full grid height, and optionally add flex constraints to contain overflow:
• File: platforms/blabsy/src/components/chat/chat.tsx
• Line 8
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>If you run into cropping or child overflow issues, consider on that same <div> adding flex flex-col min-h-0 overflow-hidden, and ensure the immediate scroll container inside ChatList also has min-h-0.
Manual test: load many chats and verify the left list scrolls within its column rather than the whole page.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'> | |
| <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'> |
🤖 Prompt for AI Agents
In platforms/blabsy/src/components/chat/chat.tsx around line 8, the left column
wrapper uses max-h-full which can prevent the chat list from filling the grid
column and cause scrolling of the whole page; replace max-h-full with h-full so
the container spans the full height, and optionally add flex flex-col min-h-0
overflow-hidden to the same <div> to constrain children; also ensure the
immediate scroll container inside ChatList has min-h-0 so internal scrolling
works correctly when many chats are present.
Description of change
Fixed blabsy chat overflow.
Issue Number
Closes #284
Type of change
How the change has been tested
Manually.
Change checklist
Summary by CodeRabbit