Restyle TOC like ATProto + widen content area

[daviddao]

Summary

• Removed max-width constraint from .layout-content — content now fills available flex space, no longer squished at 768px
• Restyled TOC to match atproto.com/guides/auth:
  • Removed "On this page" heading
  • Each heading is a toc-item with a 2px left border
  • Active item: dark border + dark text (light mode), white border + white text (dark mode)
  • Inactive items: subtle border + secondary text color
  • Larger font (14px from 13px)
• TOC width reduced from 250px to 220px (auto-sizes to content)
• Dark mode overrides for border and text colors

Summary by CodeRabbit

• New Features

  • Added dark mode styling support for the table of contents.

• Style

  • Improved table of contents layout and visual styling.
  • Updated typography and spacing for enhanced readability.
  • Adjusted content area spacing for optimized layout.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hypercerts-atproto-documentation	Ready	Preview, Comment	Feb 20, 2026 0:25am
hypercerts-v0.2-documentation	Error		Feb 20, 2026 0:25am

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The TableOfContents component's DOM structure was refactored from ul/li markup to div-based elements, with the active state now applied directly to item wrappers. Corresponding CSS updates introduce dark mode support, establish fixed TOC width, adjust typography and spacing, and remove certain layout constraints for improved consistency.

Changes

Cohort / File(s)	Summary
Component Restructuring components/TableOfContents.js	Changed container from <ul> to <div> and wrapped items in <div> elements instead of <li>. Moved active state class from link element to the item wrapper div.
CSS Styling Updates styles/globals.css	Added dark mode selectors for TOC items (.toc-item, .toc-item-active, .toc-link-active). Changed TOC block from variable to fixed width (220px). Removed max-width constraint on layout-content and toc-title block. Updated typography (font-size 13px→14px, line-height 20px→1.5) and adjusted spacing/padding throughout.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 From lists of tags to nested divs, I hop with glee,
Dark modes bloom in CSS, a sight for all to see,
Fixed widths hold the TOC true, spacing just right,
No more constraints on content wide—it's quite the flight! ✨

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/toc-and-content-width

---

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 and usage tips.}