From 74c94474c6c4ede78aa8c4dc13e17f6479ee9ee4 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 29 Apr 2025 10:31:03 +0100
Subject: [PATCH 1/3] ToC vars

---
 components/src/asciidoc/TableOfContents.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/src/asciidoc/TableOfContents.tsx b/components/src/asciidoc/TableOfContents.tsx
index d0b729a3..314fb85e 100644
--- a/components/src/asciidoc/TableOfContents.tsx
+++ b/components/src/asciidoc/TableOfContents.tsx
@@ -294,7 +294,7 @@ export const DesktopOutline = ({
   }
 
   if (toc && toc.length > 0) {
-    return <ul className={cn('toc', className)}>{renderToc(toc)}</ul>
+    return <ul className={cn('toc w-[--toc-width]', className)}>{renderToc(toc)}</ul>
   }
 
   return null
@@ -352,13 +352,13 @@ export const SmallScreenOutline = ({
       >
         <Accordion.Item value="toc">
           <Accordion.Header>
-            <Accordion.Trigger className="flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-5 600:px-10 [&>svg]:data-[state=open]:rotate-90">
+            <Accordion.Trigger className="flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-[--container-px] [&>svg]:data-[state=open]:rotate-90">
               Table of Contents{' '}
               <DirectionRightIcon className="transition-all text-tertiary" />
             </Accordion.Trigger>
           </Accordion.Header>
 
-          <Accordion.Content className="animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-5 600:px-10">
+          <Accordion.Content className="animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-[--container-px]">
             <div className="py-4">{renderToc(toc)}</div>
           </Accordion.Content>
         </Accordion.Item>

From 5320f03be277f973e5ba1a9d2d953f499cb51032 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 29 Apr 2025 10:49:59 +0100
Subject: [PATCH 2/3] Fix tw var syntax

---
 components/src/asciidoc/TableOfContents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/asciidoc/TableOfContents.tsx b/components/src/asciidoc/TableOfContents.tsx
index 314fb85e..4d81e7ee 100644
--- a/components/src/asciidoc/TableOfContents.tsx
+++ b/components/src/asciidoc/TableOfContents.tsx
@@ -352,7 +352,7 @@ export const SmallScreenOutline = ({
       >
         <Accordion.Item value="toc">
           <Accordion.Header>
-            <Accordion.Trigger className="flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-[--container-px] [&>svg]:data-[state=open]:rotate-90">
+            <Accordion.Trigger className="flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-[var(--container-px)] [&>svg]:data-[state=open]:rotate-90">
               Table of Contents{' '}
               <DirectionRightIcon className="transition-all text-tertiary" />
             </Accordion.Trigger>

From 56db50376d3854c944099d739f392d3a32bb5512 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 29 Apr 2025 10:58:31 +0100
Subject: [PATCH 3/3] Revert "Fix tw var syntax"

This reverts commit 5320f03be277f973e5ba1a9d2d953f499cb51032.
---
 components/src/asciidoc/TableOfContents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/asciidoc/TableOfContents.tsx b/components/src/asciidoc/TableOfContents.tsx
index 4d81e7ee..314fb85e 100644
--- a/components/src/asciidoc/TableOfContents.tsx
+++ b/components/src/asciidoc/TableOfContents.tsx
@@ -352,7 +352,7 @@ export const SmallScreenOutline = ({
       >
         <Accordion.Item value="toc">
           <Accordion.Header>
-            <Accordion.Trigger className="flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-[var(--container-px)] [&>svg]:data-[state=open]:rotate-90">
+            <Accordion.Trigger className="flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-[--container-px] [&>svg]:data-[state=open]:rotate-90">
               Table of Contents{' '}
               <DirectionRightIcon className="transition-all text-tertiary" />
             </Accordion.Trigger>