Skip to content

Fix(mobile): Correct mobile chat component order to enable scrolling #296

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

Closed
ngoiyaeric wants to merge 1 commit into from
Closed

Fix(mobile): Correct mobile chat component order to enable scrolling #296

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
23 changes: 14 additions & 9 deletions components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,12 @@ export function Chat({ id }: ChatProps) {
if (isMobile) {
return (
<MapDataProvider> {/* Add Provider */}
{/* The order of components here is critical for mobile layout.
Using a flex column, the .mobile-chat-messages-area is set to flex: 1
which allows it to take up the remaining space. The other components
have fixed heights, so for the chat area to scroll properly, it must
be rendered before the fixed-height elements. */}
Comment on lines +78 to +82
Copy link
Copy Markdown

@charliecreates charliecreates Bot Sep 28, 2025

Choose a reason for hiding this comment

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

Relying on DOM order to make the flex item scroll is fragile. A more robust approach is to ensure the flex parent allows its child to shrink and scroll by setting min-height: 0 on the flex container and ensuring the scrollable area has overflow-y: auto. This reduces coupling to DOM order and prevents regressions if fixed-height assumptions change.

Suggestion

Consider codifying the scroll behavior via styles so it doesn’t depend on DOM order:

  • Add minHeight: 0 to the flex container.
  • Ensure the messages area has overflowY: 'auto' (and keep flex: 1).

Example:

<div className="mobile-layout-container" style={{ minHeight: 0 }}>
  <div className="mobile-chat-messages-area" style={{ minHeight: 0, overflowY: 'auto' }}>
    {/* ... */}
  </div>
  {/* ... */}
</div>

Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion

<div className="mobile-layout-container">
<div className="mobile-map-section">
{activeView ? <SettingsView /> : <Mapbox />}
</div>
<div className="mobile-icons-bar">
<MobileIconsBar />
</div>
<div className="mobile-chat-input-area">
<ChatPanel messages={messages} input={input} setInput={setInput} />
</div>
<div className="mobile-chat-messages-area">
{showEmptyScreen ? (
<EmptyScreen
Expand All @@ -96,6 +92,15 @@ export function Chat({ id }: ChatProps) {
<ChatMessages messages={messages} />
)}
</div>
<div className="mobile-chat-input-area">
<ChatPanel messages={messages} input={input} setInput={setInput} />
</div>
<div className="mobile-icons-bar">
<MobileIconsBar />
</div>
<div className="mobile-map-section">
{activeView ? <SettingsView /> : <Mapbox />}
</div>
</div>
</MapDataProvider>
);
Expand Down