anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-23 02:36:57 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

User message box overflows horizontally on mobile viewports #3884

New Issue
Open
opened 2026-02-16 17:41:48 -05:00 by yindo · 1 comment
yindo commented 2026-02-16 17:41:48 -05:00
Owner
Copy Link
Copy Source

Originally created by @cuevaio on GitHub (Dec 26, 2025).

Originally assigned to: @rekram1-node on GitHub.

Description

On mobile viewports (e.g., iPhone 14 Pro Max at 430px width), the user message box in the share page overflows horizontally, breaking the page layout and causing horizontal scrolling.

Root Cause

The [data-component="user-message"] CSS lacks proper width constraints (min-width: 0 and max-width: 100%) to allow flex children to shrink below their content size. Additionally, the [data-slot="user-message-text"] element needs overflow-wrap: break-word and word-break: break-word to handle long unbroken text.

Steps to Reproduce

  1. Open a shared session page (e.g., /share/[shareID])
  2. View on mobile viewport or use device emulation (iPhone 14 Pro Max)
  3. Observe the user message content overflowing horizontally
Image

Expected Behavior

User message content should wrap properly and respect container boundaries on all viewport sizes.

Affected Files

  • packages/ui/src/components/message-part.css
Originally created by @cuevaio on GitHub (Dec 26, 2025). Originally assigned to: @rekram1-node on GitHub. ## Description On mobile viewports (e.g., iPhone 14 Pro Max at 430px width), the user message box in the share page overflows horizontally, breaking the page layout and causing horizontal scrolling. ## Root Cause The `[data-component="user-message"]` CSS lacks proper width constraints (`min-width: 0` and `max-width: 100%`) to allow flex children to shrink below their content size. Additionally, the `[data-slot="user-message-text"]` element needs `overflow-wrap: break-word` and `word-break: break-word` to handle long unbroken text. ## Steps to Reproduce 1. Open a shared session page (e.g., `/share/[shareID]`) 2. View on mobile viewport or use device emulation (iPhone 14 Pro Max) 3. Observe the user message content overflowing horizontally <img width="1624" height="1056" alt="Image" src="https://github.com/user-attachments/assets/15414d07-7b56-4430-bacf-6a2cfa3d777a" /> ## Expected Behavior User message content should wrap properly and respect container boundaries on all viewport sizes. ## Affected Files - `packages/ui/src/components/message-part.css`
yindo added the web label 2026-02-16 17:41:48 -05:00
yindo commented 2026-02-16 17:41:49 -05:00
Author
Owner
Copy Link
Copy Source

@github-actions[bot] commented on GitHub (Dec 26, 2025):

This issue might be a duplicate of existing issues. Please check:

  • #3007: Large pasted content renders poorly in chat history—overflows and blends with questions, hindering review

This issue also relates to similar layout/viewport handling challenges. Feel free to ignore if none of these address your specific case.

@github-actions[bot] commented on GitHub (Dec 26, 2025): This issue might be a duplicate of existing issues. Please check: - #3007: Large pasted content renders poorly in chat history—overflows and blends with questions, hindering review This issue also relates to similar layout/viewport handling challenges. Feel free to ignore if none of these address your specific case.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label web
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#3884
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?