fix(docs): restore category grids after TOC layout and trim ad slot

[sudhashrestha]

Use @lg container queries on button, text, and widget index grids so two columns return with the TOC sidebar. Skip the empty TOC column when a page has no headings, and reduce Carbon ad reserved height.

Summary by CodeRabbit

• Style

  • Enhanced responsive grid layouts across documentation pages for improved visual consistency.
  • Refined ad container sizing and component spacing.
  • Adjusted text styling in animation demonstrations.

• Documentation

  • Updated documentation page descriptions for better clarity.
  • Improved table of contents rendering and layout behavior for documentation pages.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f571e89-6525-42fd-96c5-a54b1fe47ccc

📥 Commits

Reviewing files that changed from the base of the PR and between b38a676 and 4c11b50.

📒 Files selected for processing (5)

• app/(main)/docs/[[...slug]]/page.tsx
• components/ads.tsx
• content/docs/button/index.mdx
• content/docs/text/index.mdx
• content/docs/widget/index.mdx

---

📝 Walkthrough

Walkthrough

The PR refines responsive documentation layouts and table-of-contents visibility. DocPage now computes TOC presence based on actual item count, multiple doc pages standardize grid breakpoints using container queries, and minor styling adjustments are made for visual consistency.

Changes

Responsive Layout and TOC Visibility Refinements

Layer / File(s)	Summary
Table of Contents Visibility Logic app/(main)/docs/[[...slug]]/page.tsx	DocPage computes a hasToc flag that checks both doc.toc presence and whether toc.items has content. This flag gates TOC sidebar rendering and forces single-column grid layout when no TOC items exist, replacing the prior doc.toc-only check.
Documentation Grid Layout Standardization content/docs/button/index.mdx, content/docs/text/index.mdx, content/docs/widget/index.mdx	Button, text, and widget documentation pages update responsive grid breakpoints to use a consistent @lg container query breakpoint for two-column layouts, replacing prior sm/lg/@3xl settings. Button page description is refined to emphasize "animated" variants.
Component Styling Updates components/ads.tsx, content/docs/text/index.mdx	CarbonAds minimum height is reduced from min-h-48 to min-h-40, and GlitchText demo color changes from text-white to text-foreground for theme consistency.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• codse/animata#505: Also modifies app/(main)/docs/[[...slug]]/page.tsx table-of-contents computation and conditional grid/sidebar rendering based on TOC contents.
• codse/animata#439: Updates the same DocPage file with TOC sidebar rendering adjustments and layout logic changes.
• codse/animata#498: Contains related changes to content/docs/text/index.mdx GlitchText component usage and styling.

Suggested reviewers

• hari

Poem

🐰 A thoughtful PR hops through the docs,
Tidying layouts and TOC blocks.
When tables vanish, grids flex strong,
Responsive breakpoints sing in song.
Colors bloom and spacing gleams—
Docs refactored to perfection's dreams! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 'fix(docs): restore category grids after TOC layout and trim ad slot' directly and accurately summarizes the main changes: restoring grid layouts for category pages after TOC layout changes and reducing the ad slot height.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/docs-grids-and-ads

---

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.}

[cloudflare-workers-and-pages]

Deploying animata with    Cloudflare Pages

Latest commit:	4c11b50
Status:	✅  Deploy successful!
Preview URL:	https://6b5ab59e.animata.pages.dev
Branch Preview URL:	https://fix-docs-grids-and-ads.animata.pages.dev

View logs