fix: add general content overflow protection with horizontal scrolling#116
fix: add general content overflow protection with horizontal scrolling#116
Conversation
Replaces table-specific solution with universal overflow handling. Added overflow-x-auto and max-w-full classes to markdown container to prevent any content (tables, code blocks, long text) from expanding beyond chat interface boundaries. Provides horizontal scrolling when needed. Fixes #114 Co-authored-by: marksftw <marksftw@users.noreply.github.com>
|
""" WalkthroughThe root Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MarkdownComponent
participant Browser
User->>MarkdownComponent: Renders markdown with wide table
MarkdownComponent->>Browser: Applies 'overflow-x-auto', 'max-w-full', and 'min-w-0' to container
Browser->>User: Displays table with horizontal scroll, constrained to container width
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (4)
✨ Finishing Touches
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying maple with
|
| Latest commit: |
39990a0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3dfd17b3.maple-ca8.pages.dev |
| Branch Preview URL: | https://claude-issue-114-20250611-21.maple-ca8.pages.dev |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Added universal content overflow protection to the chat interface by implementing horizontal scrolling in the markdown container component.
- Added
overflow-x-auto max-w-fullclasses to markdown container infrontend/src/components/markdown.tsxto handle content overflow - Replaces previous table-specific solution with a universal approach that handles all wide content types (tables, code blocks, long text)
- Prevents UI breakage while maintaining content accessibility through horizontal scrolling
1 file reviewed, no comments
Edit PR Review Bot Settings | Greptile
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/components/markdown.tsx (1)
229-229: Optional: Enable per-code-block horizontal scrollingConsider adding
overflow-x-auto max-w-fullto the<pre>element inPreCodeso individual code blocks can scroll horizontally without affecting the entire markdown container.Proposed diff:
- <pre ref={ref}>{props.children}</pre> + <pre + ref={ref} + className="overflow-x-auto max-w-full" + >{props.children}</pre>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/markdown.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: build-ios
- GitHub Check: browseruse-tests
- GitHub Check: build-linux
- GitHub Check: build-macos (universal-apple-darwin)
🔇 Additional comments (1)
frontend/src/components/markdown.tsx (1)
376-378: Add global horizontal scroll for overflowing contentApplying
overflow-x-autoandmax-w-fullto the markdown container correctly enables horizontal scrolling for any overflowing child, addressing the general content overflow issue.
|
@claude That didn't work. |
|
Claude finished @marksftw's task in 3m 0s —— View job Todo List
Problem AnalysisThe original implementation added
Solution ImplementedRoot Cause: Flex children by default have Fix Applied:
This ensures that:
Changes Committed
The fix should now properly handle content overflow with horizontal scrolling while maintaining the chat interface layout constraints. |
- Added min-w-0 to markdown container to allow shrinking in flex layouts - Added min-w-0 to parent flex containers in UserMessage and SystemMessage - This ensures overflow-x-auto works properly by preventing flex layout constraints from blocking horizontal scrolling Fixes the issue where wide content (tables, code blocks) was still overflowing despite the previous overflow-x-auto implementation. Co-authored-by: marksftw <marksftw@users.noreply.github.com>
There was a problem hiding this comment.
PR Summary
Enhanced chat interface layout with addition of 'min-w-0' class to message containers in frontend/src/routes/_auth.chat.$chatId.tsx to ensure proper content sizing and prevent flex item expansion.
- Added
min-w-0class to both user and system message containers for consistent overflow handling
2 files reviewed, no comments
Edit PR Review Bot Settings | Greptile
|
Failed attempt, replaced by #117 |
1 participant
Replaces table-specific solution with universal overflow handling. Added overflow-x-auto and max-w-full classes to markdown container to prevent any content (tables, code blocks, long text) from expanding beyond chat interface boundaries.
Changes:
overflow-x-auto max-w-fullto markdown container insrc/components/markdown.tsx:377Fixes #114
Generated with Claude Code
Summary by CodeRabbit