Skip to content

fix: fixed blabsy chat overflow. #285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 11, 2025
Merged

fix: fixed blabsy chat overflow. #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions platforms/blabsy/src/components/chat/chat-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export function ChatWindow(): JSX.Element {
<div className='flex h-full flex-col'>
{currentChat ? (
<>
<div className='flex items-center justify-between gap-3 border-b border-gray-200 p-4 dark:border-gray-800'>
<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 items-center gap-3'>
<div className='relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700'>
{otherUser?.photoURL ? (
Expand Down Expand Up @@ -263,7 +263,7 @@ export function ChatWindow(): JSX.Element {
</div>
)}
</div>
<div className='flex-1 overflow-y-auto p-4'>
<div className='flex-1 p-4 overflow-y-auto'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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.tsx

Length 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.

Suggested change
<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.

{isLoading ? (
<div className='flex h-full w-full items-center justify-center'>
<Loading className='h-8 w-8' />
Expand Down
6 changes: 3 additions & 3 deletions platforms/blabsy/src/components/chat/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { ChatWindow } from './chat-window';

export function Chat(): JSX.Element {
return (
<main className='min-h-screen w-full max-w-5xl mt-8'>
<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'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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.tsx

Length 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.

Suggested change
<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.

<ChatList />
</div>
<div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
<div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
<ChatWindow />
</div>
</div>
Expand Down