From 4c11b5002b8084e3cbd09ad80b05f25f560287c5 Mon Sep 17 00:00:00 2001
From: Sudha Shrestha <itsmesudha12@gmail.com>
Date: Fri, 12 Jun 2026 21:20:48 +0545
Subject: [PATCH] fix(docs): restore category grids after TOC layout and trim
 ad slot

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.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/(main)/docs/[[...slug]]/page.tsx | 7 +++++--
 components/ads.tsx                   | 2 +-
 content/docs/button/index.mdx        | 4 ++--
 content/docs/text/index.mdx          | 4 ++--
 content/docs/widget/index.mdx        | 2 +-
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/(main)/docs/[[...slug]]/page.tsx b/app/(main)/docs/[[...slug]]/page.tsx
index 928a5c2c..9003c080 100644
--- a/app/(main)/docs/[[...slug]]/page.tsx
+++ b/app/(main)/docs/[[...slug]]/page.tsx
@@ -74,13 +74,16 @@ export default async function DocPage({ params }: DocPageProps) {
   }
 
   const toc = await getTableOfContents(doc.body);
+  const hasToc = doc.toc && toc?.items?.length;
 
   return (
     <>
       <DocJsonLd doc={doc} />
       <main
         id="main-content"
-        className="relative py-6 lg:grid lg:grid-cols-[1fr_200px] lg:gap-10 lg:py-8"
+        className={cn("relative py-6 lg:grid lg:grid-cols-[1fr_200px] lg:gap-10 lg:py-8", {
+          "lg:grid-cols-[1fr]": !hasToc,
+        })}
       >
         <div className="docs-content mx-auto w-full min-w-0">
           <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
@@ -156,7 +159,7 @@ export default async function DocPage({ params }: DocPageProps) {
           </div>
           <DocsPager doc={doc} />
         </div>
-        {doc.toc && (
+        {hasToc && (
           <div className="hidden text-sm lg:block">
             <div className="sticky top-[6.25rem] -mt-10 pt-4">
               <ScrollArea className="pb-10">
diff --git a/components/ads.tsx b/components/ads.tsx
index ad144cb1..09710f6b 100644
--- a/components/ads.tsx
+++ b/components/ads.tsx
@@ -33,5 +33,5 @@ export default function CarbonAds() {
     };
   }, []);
 
-  return <div id="carbon-container" className="min-h-48 mt-2" />;
+  return <div id="carbon-container" className="min-h-40 mt-2" />;
 }
diff --git a/content/docs/button/index.mdx b/content/docs/button/index.mdx
index 48cf394b..6b4edfff 100644
--- a/content/docs/button/index.mdx
+++ b/content/docs/button/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Buttons overview
-description: A collection of buttons for call to actions.
+description: A collection of animated buttons for call to actions and micro-interactions.
 author: harimanok_
 ---
 
@@ -15,7 +15,7 @@ import AlgoliaButtonBlue from "@/animata/button/algolia-blue-button";
 import Duolingo from "@/animata/button/duolingo";
 import SlideArrowButton from "@/animata/button/slide-arrow-button";
 
-<ComponentList className="sm:grid-cols-2 lg:grid-cols-2">
+<ComponentList className="grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 @lg:grid-cols-2">
   <ComponentListItem copyId="work-button">
     <WorkButton />
     ```tsx file=<rootDir>/animata/button/work-button.tsx copyId="work-button"
diff --git a/content/docs/text/index.mdx b/content/docs/text/index.mdx
index 84e48df7..a9ba7aba 100644
--- a/content/docs/text/index.mdx
+++ b/content/docs/text/index.mdx
@@ -46,7 +46,7 @@ import UnderlineHoverText from "@/animata/text/underline-hover-text";
 import WaveReveal from "@/animata/text/wave-reveal";
 import InView from "@/components/in-view";
 
-<ComponentList className="grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 @3xl:grid-cols-2">
+<ComponentList className="grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 @lg:grid-cols-2">
   <ComponentListItem copyId="animated-gradient-text" href="/docs/text/animated-gradient-text">
     <AnimatedGradientText className="text-3xl md:text-4xl font-bold">Gradient Text</AnimatedGradientText>
   </ComponentListItem>
@@ -95,7 +95,7 @@ import InView from "@/components/in-view";
 
   <ComponentListItem copyId="glitch-text" href="/docs/text/glitch-text">
     <InView>
-      <GlitchText className="font-(family-name:--font-display) text-2xl font-black uppercase tracking-tight text-white sm:text-3xl md:text-4xl">
+      <GlitchText className="font-(family-name:--font-display) text-2xl font-black uppercase tracking-tight text-foreground sm:text-3xl md:text-4xl">
         1000 Stars
       </GlitchText>
     </InView>
diff --git a/content/docs/widget/index.mdx b/content/docs/widget/index.mdx
index b9e7c5e0..9554f6a6 100644
--- a/content/docs/widget/index.mdx
+++ b/content/docs/widget/index.mdx
@@ -36,7 +36,7 @@ import WeeklyProgress from "@/animata/widget/weekly-progress";
 
 ## Square
 
-<ComponentList>
+<ComponentList className="grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 @lg:grid-cols-2">
   <ComponentListItem copyId="cycling">
     <Cycling />
     ```tsx file=<rootDir>/animata/widget/cycling.tsx copyId="cycling"