Scroll wide article tables horizontally

[kecan0406]

Make tables in article bodies scroll within the content column instead
of overlapping the sidebar.

Fixes #363

Assisted-by: Claude Code:claude-fable-5

[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: 7620d6d8-ac4b-48a9-ad23-d6cdf995720c

📥 Commits

Reviewing files that changed from the base of the PR and between c29bd9e and 51cd9cd.

📒 Files selected for processing (2)

• web-next/src/app.css
• web-next/src/routes/(root)/[handle]/[idOrYear]/[slug]/index.tsx

---

📝 Walkthrough

Walkthrough

Changes

Article layout

Layer / File(s)	Summary
Article overflow constraints web-next/src/app.css, web-next/src/routes/.../index.tsx	Prose tables now scroll horizontally, and the 2xl article sidebar is constrained to the viewport and scrolls vertically when needed.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested labels: web-next

Suggested reviewers: dahlia

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the table overflow fix, though it omits the sidebar TOC scrolling part.
Description check	✅ Passed	The description is directly about article tables scrolling within the content column to avoid sidebar overlap.
Linked Issues check	✅ Passed	The changes address both linked issue concerns: wide tables now scroll and the sticky TOC becomes internally scrollable.
Out of Scope Changes check	✅ Passed	The diff stays focused on article layout scrolling behavior for tables and the sidebar, with no unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist]

Code Review

This pull request adds horizontal scrolling to tables in prose and makes the article aside sidebar vertically scrollable with a maximum height. Feedback was provided on the table styling, pointing out that applying display: block to a <table> element causes accessibility issues with screen readers and layout bugs. It is recommended to wrap tables in a scrollable container instead.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Applying display: block to a <table> element is a common workaround for horizontal scrolling, but it has significant drawbacks:\n\n1. Accessibility (a11y) Issue: Changing the display property of a table to block or inline-block causes many screen readers (such as VoiceOver on macOS/iOS) to lose the table's semantic role. It will no longer be announced as a table, and users won't be able to use table navigation commands.\n2. Layout Issues: It breaks table-specific CSS properties (like table-layout: fixed) and can cause columns or the table itself to not stretch properly to 100% width in some browsers.\n\nRecommendation:\nInstead of changing the table's display property in CSS, wrap the tables in a scrollable container (e.g., <div class="overflow-x-auto"><table>...</table></div>) during the Markdown-to-HTML rendering process (for example, using a rehype plugin or custom markdown renderer on the backend). This preserves both accessibility and standard table layout behavior.