From 3aa101812e6fe9d3f2cc3e0d5df89f69967f0830 Mon Sep 17 00:00:00 2001
From: kbot <kbot@local>
Date: Wed, 3 Jun 2026 21:55:55 -0500
Subject: [PATCH] refactor: replace pixel-based TOC sidebar width and sticky
 offset with flexible values

---
 app/posts/[slug]/page.tsx            | 2 +-
 components/posts/TableOfContents.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index f9d522e..26372c5 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -36,7 +36,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
       <ScrollToTop />
       <ReadingProgress />
       <div className="mx-auto max-w-6xl px-6 py-16">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_220px] lg:gap-12">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12">
           <article className="min-w-0">
             <header className="mb-12">
               <time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
diff --git a/components/posts/TableOfContents.tsx b/components/posts/TableOfContents.tsx
index a2cbeb6..385648e 100644
--- a/components/posts/TableOfContents.tsx
+++ b/components/posts/TableOfContents.tsx
@@ -74,7 +74,7 @@ export function TableOfContents() {
   if (headings.length === 0) return null;
 
   return (
-    <nav aria-label="Table of contents" className="lg:sticky lg:top-[var(--header-height)]">
+    <nav aria-label="Table of contents" className="lg:sticky lg:top-20">
       <h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-ink-soft mb-3">
         On this page
       </h4>