fix: improve table rendering with better column widths and scroll indicators

[AnthonyRonning]

Summary

Improves how markdown tables render in the chat interface.

Changes

Column width improvements

• Add max-width (300px) to table cells so long text wraps instead of extending infinitely
• Add min-width (80px) to prevent columns from getting too narrow on mobile
• Tables now size to fit content instead of always being full width
• Tables scroll horizontally on mobile when content exceeds viewport

Scroll indicator shadows

• Show subtle gradient shadows on table edges when there's more content to scroll
• Shadows appear/disappear dynamically based on scroll position
• Helps users discover that a table is scrollable

Screenshots

Testing required on both desktop and mobile to verify table rendering behavior.

Summary by CodeRabbit

• New Features

  • Tables with horizontal scrolling now display visual gradient indicators at the edges to show when scrolling left or right is available

• Style

  • Enhanced table cell text wrapping with optimized width constraints and word-break handling to improve content display within bounded column widths

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

[coderabbitai]

Walkthrough

The changes enhance table rendering with horizontal scroll detection and visual indicators, while updating table cell styling to support text wrapping within bounded column widths instead of forcing no-wrap behavior.

Changes

Cohort / File(s)	Summary
Responsive Table Enhancement frontend/src/chat.css, frontend/src/components/markdown.tsx	CSS updates to table cells enable text wrapping with min-width: 80px, max-width: 300px, and word-wrap: break-word. React component adds scroll state tracking (canScrollLeft, canScrollRight), useEffect for scroll position detection with event listeners, and gradient overlay elements positioned at table edges when scrollable.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Scroll detection logic and event listener cleanup/memory management in useEffect
• State flag updates tied to scroll and resize events
• Gradient overlay positioning and visibility conditions
• CSS changes and their interaction with new min/max-width constraints and layout restructuring

Possibly related PRs

• Fix markdown table rendering on mobile and desktop #244: Modifies the same files (chat.css and markdown.tsx) affecting ResponsiveTable and table cell whitespace behavior with an opposing approach to white-space handling.
• fix: implement responsive table wrapper to prevent chat layout overflow #117: Extends ResponsiveTable code in markdown.tsx with scroll detection, gradient overlays, and responsive table wrapper logic that directly builds on similar table-rendering enhancements.

Poem

🐰 Tables now dance with flowing text,
No longer bound by rigid fence,
Gradients bloom where scrolls are best,
A rabbit's wrapping makes much sense! ✨📜

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 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 changes: improving table rendering with better column widths and adding scroll indicators, which matches the primary objectives of the changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/table-column-width

---

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

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	9170117
Status:	✅  Deploy successful!
Preview URL:	https://239fec80.maple-ca8.pages.dev
Branch Preview URL:	https://fix-table-column-width.maple-ca8.pages.dev

View logs

[greptile-apps]

Greptile Overview

Greptile Summary

This PR improves markdown table rendering in the chat interface by adding proper column width constraints and visual scroll indicators.

• CSS changes constrain table cells to 80-300px width with word wrapping, preventing infinitely wide columns
• Added dynamic gradient shadows on table edges that appear/disappear based on scroll position to indicate scrollable content
• The ResponsiveTable component now uses useEffect with scroll/resize event listeners to track scrollability
• The negative margin trick (-mx-4 px-4) allows the scroll indicators to extend to the container edges

Confidence Score: 5/5

• This PR is safe to merge - it's a UI enhancement with no logic changes or risk of regression
• The changes are straightforward CSS and React styling improvements. The scroll detection logic is simple and well-implemented with proper cleanup. The pattern used matches existing code in ChatHistoryList.tsx.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
frontend/src/chat.css	5/5	Added min-width (80px), max-width (300px), and word-wrap properties to table cells. Changed white-space from nowrap to normal for better text wrapping.
frontend/src/components/markdown.tsx	4/5	Added scroll indicator shadows to ResponsiveTable component using useEffect with scroll/resize event listeners. The empty dependency array may miss content updates but is acceptable for typical markdown usage.

Sequence Diagram

sequenceDiagram
    participant User
    participant ResponsiveTable
    participant DOM
    participant State

    User->>ResponsiveTable: Renders table in chat
    ResponsiveTable->>DOM: Creates scrollable container with ref
    ResponsiveTable->>State: Initialize canScrollLeft=false, canScrollRight=false
    
    Note over ResponsiveTable: useEffect runs on mount
    ResponsiveTable->>DOM: checkScroll() - reads scrollWidth, clientWidth
    DOM-->>ResponsiveTable: Returns dimensions
    ResponsiveTable->>State: setCanScrollLeft/Right based on dimensions
    
    ResponsiveTable->>DOM: addEventListener('scroll')
    ResponsiveTable->>DOM: addEventListener('resize')
    
    User->>DOM: Scrolls table horizontally
    DOM->>ResponsiveTable: scroll event triggers checkScroll()
    ResponsiveTable->>State: Update canScrollLeft/Right
    State-->>ResponsiveTable: Re-render with gradient shadows

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

frontend/src/components/markdown.tsx (2)

272-295: Scroll listener + state logic is sound; consider reacting to content changes

The scroll/resize listener setup and cleanup look correct and should avoid leaks. If table content can grow after mount (e.g., streaming markdown that extends columns), the initial checkScroll() won’t re-run until a scroll or window resize happens; if you want gradients to appear immediately when overflow starts, you could optionally re-run checkScroll when children change or hook a ResizeObserver on el.

---

297-315: Wrapper and gradient overlays achieve the intended horizontal-scroll UX; minor a11y tweak optional

The new wrapper structure (-mx-4 padding, scroll container, bordered/rounded inner wrapper, and minWidth: "max-content" table) lines up well with the scrollable-table plus edge-shadow behavior described in the PR. Since the gradient divs are purely decorative and already pointer-events-none, you might optionally add aria-hidden="true" to keep them completely out of the accessibility tree.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ad67576 and 9170117.

📒 Files selected for processing (2)

• frontend/src/chat.css (1 hunks)
• frontend/src/components/markdown.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

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

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling

Files:

• frontend/src/components/markdown.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use strict TypeScript typing and avoid any when possible

Files:

• frontend/src/components/markdown.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). (5)

• GitHub Check: build-ios
• GitHub Check: build-linux
• GitHub Check: build-macos (universal-apple-darwin)
• GitHub Check: build-android
• GitHub Check: Cloudflare Pages

🔇 Additional comments (1)

frontend/src/chat.css (1)

608-616: Table cell min/max widths and wrapping align with responsive table goals

The min/max widths and explicit wrapping on th, td nicely enforce readable columns and prevent runaway widths while still allowing horizontal scroll when needed. Looks good as-is.

[AnthonyRonning]

@TestFlight build

[github-actions]

🚀 TestFlight deployment triggered! Check the Actions tab for progress.

[github-actions]

✅ TestFlight deployment completed successfully!