Restore markdown table scrolling after redesign

[AnthonyRonning]

Summary

• restore intrinsic-width markdown table behavior for chat markdown tables
• keep the redesign's visual table styling while avoiding collapsed mobile columns
• bring back horizontal scroll affordance shadows for overflowed tables

Testing

• just format
• just lint
• just build

---

Summary by CodeRabbit

• Style

  • Enhanced table layout with flexible column sizing, replacing fixed-width design and responsive breakpoint adjustments.

• New Features

  • Tables now display gradient overlay indicators on left and right edges when content is horizontally scrollable, improving navigation for wide tables.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7fd054ae-5e8f-470d-8734-271d5fa4245a

📥 Commits

Reviewing files that changed from the base of the PR and between 076abdb and daa326b.

📒 Files selected for processing (2)

• frontend/src/chat.css
• frontend/src/components/markdown.tsx

---

📝 Walkthrough

Walkthrough

This pull request refactors markdown table layout and adds scroll-state detection to table components. The CSS changes switch table sizing from fixed-width with wrapping constraints to intrinsic column sizing using table-layout: auto and width: max-content. The React component now detects horizontal scroll capability and conditionally renders gradient overlays for scrollable tables.

Changes

Cohort / File(s)	Summary
Table CSS Styling frontend/src/chat.css	Switches .markdown-table-maple from fixed/full-width layout (table-layout: fixed, width: 100%) to intrinsic sizing (table-layout: auto, width: max-content); removes responsive media-query breakpoints for column width adjustments, cell wrapping constraints, and redundant max-width overrides.
Scroll Detection & Overlays frontend/src/components/markdown.tsx	Enhances ResponsiveTable with scroll-state measurement via scroll container ref, ResizeObserver, and resize event listeners; conditionally renders left/right gradient overlays based on scrollLeft/scrollRight calculations; refactors table prop application to merge computed styles with minWidth: "max-content".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #117: Adds initial scroll-state detection and gradient overlay functionality to ResponsiveTable, establishing the foundation for these changes.
• PR #244: Modifies both CSS table styling and ResponsiveTable scroll behavior to implement intrinsic width sizing alongside scroll detection.
• PR #339: Contains overlapping refactors to markdown table rendering, scroll detection logic, and CSS layout constraints.

Poem

🐰 Tables now breathe with room to scroll,
No fixed widths to play their role—
Gradients glow where fingers glide,
Left and right, content's guide! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Restore markdown table scrolling after redesign' clearly and specifically identifies the main change: restoring horizontal scrolling functionality for markdown tables after a redesign, which aligns with the primary objectives of the PR.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/restore-markdown-table-scroll

---

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

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	daa326b
Status:	✅  Deploy successful!
Preview URL:	https://992ea386.maple-ca8.pages.dev
Branch Preview URL:	https://fix-restore-markdown-table-s.maple-ca8.pages.dev

View logs

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.