Fix right sidebar text and tool call rendering by 2witstudios · Pull Request #176 · 2witstudios/PageSpace

2witstudios · 2026-01-10T21:30:17Z

Replace overflow-hidden with break-words on text containers to allow proper word wrapping instead of clipping content. The CSS module already had proper word-breaking rules but the parent overflow-hidden was preventing them from working.

Summary by CodeRabbit

Bug Fixes
- Improved text wrapping behavior in AI chat messages to ensure long content displays properly instead of being clipped or hidden.
- Enhanced content rendering in compact message views and tool call renderers for better readability and visibility.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Replace overflow-hidden with break-words on text containers to allow proper word wrapping instead of clipping content. The CSS module already had proper word-breaking rules but the parent overflow-hidden was preventing them from working.

chatgpt-codex-connector · 2026-01-10T21:30:23Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

coderabbitai · 2026-01-10T21:30:28Z

📝 Walkthrough

Walkthrough

Three chat message renderer components are updated to improve text wrapping behavior. The changes replace overflow-hidden classes with break-words to allow long content to wrap within compact message renderers and tool call renderers, while also removing overflow constraints from standard message rendering containers.

Changes

Cohort / File(s)	Summary
Compact message and tool call renderers `apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx`, `apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx`	Replaced `overflow-hidden` with `break-words` class to enable text wrapping in content containers. Applies to compact prose blocks, input/output sections, error messages, and expandable details areas.
Standard message renderer `apps/web/src/components/ai/shared/chat/MessageRenderer.tsx`	Removed `overflow-hidden` class from outer TextBlock container to allow content to wrap naturally.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

Fix text overflow in chat sidebar #172: Modifies the same chat renderer files with Tailwind class adjustments for overflow and word-breaking behavior.
refactor(ai): migrate AI UI to shadcn and improve message rendering #92: Updates the same chat renderer components with layout and styling adjustments across message rendering structure.

Poem

🐰 A hop and a skip through words that wrap,
No more clipped text, no overflow gap,
Break-words now bloom where overflow hid,
Long content flows—hooray! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main change: removing overflow-hidden constraints and applying break-words to fix text wrapping in sidebar message and tool call renderers.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2d50e7d and c087165.

📒 Files selected for processing (3)

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Never use any types - always use proper TypeScript types
Use camelCase for variable and function names
Use UPPER_SNAKE_CASE for constants
Use PascalCase for type and enum names
Use kebab-case for filenames, except React hooks (camelCase with use prefix), Zustand stores (camelCase with use prefix), and React components (PascalCase)
Lint with Next/ESLint as configured in apps/web/eslint.config.mjs
Message content should always use the message parts structure with { parts: [{ type: 'text', text: '...' }] }
Use centralized permission functions from @pagespace/lib/permissions (e.g., getUserAccessLevel, canUserEditPage) instead of implementing permission logic locally
Always use Drizzle client from @pagespace/db package for database access
Use ESM modules throughout the codebase

**/*.{ts,tsx}: Never use any types - always use proper TypeScript types
Write code that is explicit over implicit and self-documenting

Files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/*.tsx: React component files should use PascalCase (e.g., UserProfile.tsx)
Use @dnd-kit for drag-and-drop functionality
Use Zustand for client state management
Use SWR for server state management and caching

Files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

**/*.{ts,tsx,js,jsx,json}

📄 CodeRabbit inference engine (AGENTS.md)

Format code with Prettier

Files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

**/*.{tsx,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Tailwind CSS and shadcn/ui components for styling and UI

Files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

apps/web/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/web/src/**/*.{ts,tsx}: Use message parts structure for message content: { parts: [{ type: 'text', text: '...' }] }
For database access, always use Drizzle client from @pagespace/db: import { db, pages } from '@pagespace/db';
Use centralized Drizzle ORM with PostgreSQL for all database operations - no direct SQL or other ORMs
Use Socket.IO for real-time collaboration features - imported from the realtime service at port 3001
Use Vercel AI SDK with async/await for all AI operations and streaming
Use Next.js 15 App Router and TypeScript for all routes and components

Files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

apps/web/src/components/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/web/src/components/**/*.{ts,tsx}: When document editing, register editing state with useEditingStore.getState().startEditing() to prevent UI refreshes, and clean up in return statement
When AI is streaming, register streaming state with useEditingStore.getState().startStreaming() to prevent UI refreshes, and clean up in return statement
For SWR data fetching with editing protection, use isPaused: () => hasLoadedRef.current && isEditingActive() to allow initial fetch and only pause after, with revalidateOnFocus: false
Use Zustand for client-side state management as the primary state solution
Use SWR for server state and caching with proper configuration including revalidateOnFocus: false for editing protection
Use TipTap rich text editor with markdown support for document editing
Use Monaco Editor for code editing features
Use @dnd-kit for drag-and-drop functionality instead of other libraries
Use Tailwind CSS with shadcn/ui components for all UI styling and components

Files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

🧠 Learnings (8)

📓 Common learnings

Learnt from: 2witstudios
Repo: 2witstudios/PageSpace PR: 91
File: apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx:253-277
Timestamp: 2025-12-16T19:03:59.870Z
Learning: In apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx (TypeScript/React), use the `getLanguageFromPath` utility from `formatters.ts` to infer syntax highlighting language from file paths instead of hardcoding language values in DocumentRenderer calls.

📚 Learning: 2025-12-16T19:03:59.870Z

Learnt from: 2witstudios
Repo: 2witstudios/PageSpace PR: 91
File: apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx:253-277
Timestamp: 2025-12-16T19:03:59.870Z
Learning: In apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx (TypeScript/React), use the `getLanguageFromPath` utility from `formatters.ts` to infer syntax highlighting language from file paths instead of hardcoding language values in DocumentRenderer calls.

Applied to files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx
apps/web/src/components/ai/shared/chat/MessageRenderer.tsx
apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx

📚 Learning: 2025-12-23T18:49:41.966Z

Learnt from: CR
Repo: 2witstudios/PageSpace PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-23T18:49:41.966Z
Learning: Applies to apps/web/src/**/*.{ts,tsx} : Use message parts structure for message content: `{ parts: [{ type: 'text', text: '...' }] }`

Applied to files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx

📚 Learning: 2025-12-14T14:54:45.713Z

Learnt from: CR
Repo: 2witstudios/PageSpace PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-14T14:54:45.713Z
Learning: Applies to **/*.{ts,tsx} : Keep commits and diffs minimal and focused on specific changes

Applied to files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx

📚 Learning: 2025-12-22T20:04:40.910Z

Learnt from: CR
Repo: 2witstudios/PageSpace PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-22T20:04:40.910Z
Learning: Applies to **/*.{ts,tsx} : Message content should always use the message parts structure with `{ parts: [{ type: 'text', text: '...' }] }`

Applied to files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx

📚 Learning: 2025-12-14T14:54:38.009Z

Learnt from: CR
Repo: 2witstudios/PageSpace PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-14T14:54:38.009Z
Learning: Applies to **/*.{ts,tsx} : Message content must always use the message parts structure with type and text fields (e.g., `{ parts: [{ type: 'text', text: '...' }] }`)

Applied to files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx

📚 Learning: 2025-12-14T14:54:45.713Z

Learnt from: CR
Repo: 2witstudios/PageSpace PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-14T14:54:45.713Z
Learning: Applies to **/*.{ts,tsx} : Always use the message parts structure with `{ parts: [{ type: 'text', text: '...' }] }` format for message content

Applied to files:

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx

📚 Learning: 2025-12-16T19:06:20.385Z

Learnt from: 2witstudios
Repo: 2witstudios/PageSpace PR: 91
File: apps/web/src/components/ai/ui/Image.tsx:2-2
Timestamp: 2025-12-16T19:06:20.385Z
Learning: In apps/web/src/components/ai/ui/Image.tsx (TypeScript/React), the intentional use of `Experimental_GeneratedImage` from the Vercel AI SDK is accepted. This type is the correct and intended way to handle AI-generated images with base64/mediaType properties, and will be updated when the AI SDK stabilizes this API.

Applied to files:

apps/web/src/components/ai/shared/chat/MessageRenderer.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Lint & TypeScript Check
GitHub Check: Unit Tests

🔇 Additional comments (7)

apps/web/src/components/ai/shared/chat/CompactMessageRenderer.tsx (2)

58-61: LGTM - Outer container overflow constraint removed.

Removing overflow-hidden from the outer message container allows the inner content to wrap instead of being clipped. The min-w-0 max-w-full constraints properly manage the container width.

82-84: LGTM - Break-words added for proper text wrapping.

Adding break-words to the content container ensures long words wrap appropriately within the compact sidebar layout. This works well with the existing prose classes and CSS module styles.

apps/web/src/components/ai/shared/chat/tool-calls/CompactToolCallRenderer.tsx (4)

250-258: LGTM - Expanded details wrapping improved.

Adding break-words to the expanded details container and input section ensures long content wraps properly in the compact sidebar. The combination with max-w-full constrains the width while allowing text to wrap instead of being clipped.

261-310: LGTM - Output section wrapping enhanced.

Adding break-words to the output section container allows result content to wrap properly. Note that the <pre> tags at lines 298 and 304 use break-all, which is more aggressive than break-words but appropriate for displaying code/JSON in narrow sidebars where preventing horizontal overflow is critical.

314-317: LGTM - Error messages now wrap properly.

Adding break-words to the error container ensures long error messages wrap instead of overflowing in the compact sidebar layout.

323-338: LGTM - Container overflow constraints removed to enable wrapping.

Removing overflow-hidden from both the main container (line 323) and button container (line 326) allows content to wrap naturally. The max-w-full constraints are retained to prevent the containers from exceeding their parent's width, while the removal of overflow clipping allows the break-words classes added to inner elements to take effect.

apps/web/src/components/ai/shared/chat/MessageRenderer.tsx (1)

78-78: LGTM! Overflow constraint removed to enable proper text wrapping.

Removing overflow-hidden from the outer container allows the break-words and overflow-wrap-anywhere rules on the inner div (line 79) to work correctly, ensuring long text wraps instead of being clipped. This change aligns with the PR's objective to fix sidebar text rendering.

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

2witstudios merged commit 5c306ad into master Jan 10, 2026
3 checks passed

This was referenced Jan 30, 2026

fix(ui): add proper text wrapping to direct message bubbles on mobile #285

Merged

fix(mobile): improve text wrapping in chat to avoid orphaned characters #290

Merged

Navigation Menu

Repository navigation

Fix right sidebar text and tool call rendering - #176

Fix right sidebar text and tool call rendering#176
2witstudios merged 1 commit into
masterfrom
claude/fix-sidebar-rendering-ArSm5

2witstudios commented Jan 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

chatgpt-codex-connector Bot commented Jan 10, 2026

Uh oh!

coderabbitai Bot commented Jan 10, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

2witstudios commented Jan 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

chatgpt-codex-connector Bot commented Jan 10, 2026

Uh oh!

coderabbitai Bot commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

2witstudios commented Jan 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 10, 2026 •

edited

Loading