Skip to content

fix(mobile): Move chat input into horizontally scrolling container #293

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): Move chat input into horizontally scrolling container #293

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
51 changes: 0 additions & 51 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,40 +160,6 @@
box-sizing: border-box;
}

.mobile-chat-input-area {
Copy link
Copy Markdown

@charliecreates charliecreates Bot Sep 20, 2025

Choose a reason for hiding this comment

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

You removed the .mobile-chat-input* styles, but ChatPanel still conditionally applies the mobile-chat-input class with the comment “Apply mobile chat input styling.” This creates dead/ghost styling and confusion. Given the new layout, this class no longer has any effect and should be removed, or replaced with utility classes where needed.

Suggestion

Remove the mobile-chat-input class usage from ChatPanel and rely on utilities. For example:

  • In components/chat-panel.tsx, remove isMobile && 'mobile-chat-input' from the wrapper around <Textarea>.

If you want me to add a commit that removes the class usage and updates the comment, reply with "@CharlieHelps yes please".

height: 70px;
padding: 10px;
background-color: hsl(var(--background));
/* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */
border-bottom: 1px solid hsl(var(--border)); /* Added for separation from messages area below */
box-sizing: border-box;
/* z-index: 30; */ /* No longer needed as it's in flow */
display: flex;
align-items: center;
}

.mobile-chat-input {
/* position: relative; */ /* No longer fixed to bottom */
/* bottom: 0; */
/* left: 0; */ /* Handled by parent flex */
/* right: 0; */ /* Handled by parent flex */
width: 100%; /* Ensure it takes full width of its container */
padding: 10px;
background-color: hsl(var(--background));
/* border-top: 1px solid hsl(var(--border)); */ /* Removed to avoid double border */
/* z-index: 30; */ /* No longer needed */
}

.mobile-chat-input input {
width: 100%;
padding: 8px;
border: 1px solid hsl(var(--input));
border-radius: var(--radius);
background-color: hsl(var(--input));
color: hsl(var(--foreground));
box-sizing: border-box;
}

.mobile-icons-bar-content .icon-button {
display: flex;
align-items: center;
Expand All @@ -210,23 +176,6 @@
background-color: hsl(var(--secondary-foreground));
color: hsl(var(--secondary));
}

.mobile-chat-input .icon-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
border: none;
cursor: pointer;
}

.mobile-chat-input .icon-button.paperclip {
right: 40px;
}

.mobile-chat-input .icon-button.arrow-right {
right: 10px;
}
}

/* Added for MapboxDraw controls */
Expand Down
4 changes: 2 additions & 2 deletions components/chat-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,14 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
className={cn(
'flex flex-col items-start',
isMobile
? 'w-full h-full'
? 'w-auto'
: 'sticky bottom-0 bg-background z-10 w-full border-t border-border px-2 py-3 md:px-4'
)}
Comment on lines 89 to 93
Copy link
Copy Markdown

@charliecreates charliecreates Bot Sep 20, 2025

Choose a reason for hiding this comment

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

On mobile, the ChatPanel container changed from w-full h-full to w-auto, but the inner form still forces w-full. Inside a horizontally scrolling row, this combination can lead to awkward shrinking or overflow. To ensure the input stays usable and creates predictable horizontal scroll, make the ChatPanel a non-shrinking flex item with an explicit width (or min-width).

Suggestion

Adjust the mobile container sizing to prevent shrinking and set a predictable width:

<div
  className={cn(
    'flex flex-col items-start',
    isMobile
      ? 'flex-none shrink-0 w-[min(560px,85vw)]' // was: w-auto
      : 'sticky bottom-0 bg-background z-10 w-full border-t border-border px-2 py-3 md:px-4'
  )}
>

Optionally, keep the form as w-full so the textarea fills this width. Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this change.

>
<form
ref={formRef}
onSubmit={handleSubmit}
className={cn('max-w-full w-full', isMobile ? 'px-2 pb-2 pt-1 h-full flex flex-col justify-center' : '')}
className={cn('max-w-full w-full', isMobile ? 'px-2 pb-2 pt-1 flex flex-col justify-center' : '')}
>
<div
className={cn(
Expand Down
7 changes: 3 additions & 4 deletions components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,9 @@ export function Chat({ id }: ChatProps) {
{activeView ? <SettingsView /> : <Mapbox />}
</div>
<div className="mobile-icons-bar">
<MobileIconsBar />
</div>
<div className="mobile-chat-input-area">
<ChatPanel messages={messages} input={input} setInput={setInput} />
<MobileIconsBar>
<ChatPanel messages={messages} input={input} setInput={setInput} />
</MobileIconsBar>
Comment on lines +83 to +85
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Sep 20, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

🧩 Analysis chain

Verify that MobileIconsBar handles scrollable overflow correctly.

Since ChatPanel is now a child of MobileIconsBar, ensure that the icon bar's container properly handles horizontal scrolling when the combined width of icons + chat panel exceeds the viewport width.

🏁 Script executed:

#!/bin/bash
# Description: Check the CSS for mobile-icons-bar-content to verify scrolling behavior

# Search for the mobile-icons-bar-content class styling
rg -n "mobile-icons-bar-content" --type=css --type=scss -A10 -B5

# Also check for any overflow or scroll-related styling in mobile contexts
rg -n "overflow.*scroll|scroll.*overflow|mobile.*overflow" --type=css --type=scss -A3 -B3

Length of output: 57

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Searching for MobileIconsBar and related class names..."
rg -n --hidden -S "MobileIconsBar|mobile-icons-bar-content|mobile-icons-bar" -C3 || true

echo "Searching for CSS overflow properties anywhere in repo..."
rg -n --hidden -S "overflow\s*:" -C3 || true

echo "Printing components/chat.tsx (up to 300 lines) for context if present..."
if [ -f components/chat.tsx ]; then
  sed -n '1,300p' components/chat.tsx
else
  echo "components/chat.tsx not found"
fi

echo "Searching for styled-components / css-in-js patterns that might define styles..."
rg -n --hidden -S "styled\..*|css`|className=.*mobile|mobileIcons" -C3 || true

Length of output: 13336

Enable horizontal scrolling for the mobile icons bar
Add overflow-x: auto; -webkit-overflow-scrolling: touch; to .mobile-icons-bar-content so that icons and the nested ChatPanel can scroll when their combined width exceeds the viewport.

🤖 Prompt for AI Agents 
In components/chat.tsx around lines 83 to 85, the MobileIconsBar's content
container needs horizontal scrolling when its children overflow; update the CSS
for the .mobile-icons-bar-content selector to include overflow-x: auto and
-webkit-overflow-scrolling: touch, and ensure the inner layout remains
inline/flex (e.g., keep display:flex or white-space: nowrap on the children) so
icons and the nested ChatPanel can scroll horizontally on mobile.

</div>
<div className="mobile-chat-messages-area">
{showEmptyScreen ? (
Expand Down
5 changes: 4 additions & 1 deletion components/mobile-icons-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ import { History } from '@/components/history'
import { MapToggle } from './map-toggle'
import { ModeToggle } from './mode-toggle'

export const MobileIconsBar: React.FC = () => {
export const MobileIconsBar: React.FC<{ children?: React.ReactNode }> = ({
children
}) => {
const [, setMessages] = useUIState<typeof AI>()
const { clearChat } = useActions()

Expand Down Expand Up @@ -53,6 +55,7 @@ export const MobileIconsBar: React.FC = () => {
</Button>
<History location="header" />
<ModeToggle />
{children}
</div>
Comment on lines +58 to 59
Copy link
Copy Markdown

@charliecreates charliecreates Bot Sep 20, 2025

Choose a reason for hiding this comment

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

Appending raw {children} directly into the icon row can cause the child (now ChatPanel) to shrink alongside icons or layout inconsistently in the horizontal scroll. Wrapping children in a non-shrinking container and adding spacing will stabilize the layout and keep the input usable within the scrollable bar.

Suggestion

Wrap children with a non-shrinking container and spacing:

{children ? <div className="flex-none shrink-0 ml-2">{children}</div> : null}

Reply with "@CharlieHelps yes please" if you want me to add this change.

)
}
Expand Down