feat(table-of-contents): implement scrollable TOC with radix-ui

- Add @radix-ui/react-scroll-area dependency
- Create scroll-area component with custom styling
- Refactor TOC layout to use scroll-area component
- Improve TOC styling and active state transitions
- Apply consistent TOC styling across blog and about layouts

src/layouts/BlogPostLayout.astro

@@ -111,10 +111,8 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
             <!-- Sidebar with Table of Contents -->
             <aside class="xl:col-span-1 order-1 xl:order-2 md:mb-0 mb-6">
               <div class="xl:sticky xl:top-24">
-                <!-- Table of Contents with dynamic max height -->
-                <div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border overflow-y-auto" style="max-height: min(calc(100vh - 6rem), 600px);">
-                  <TableOfContents lang={lang} />
-                </div>
+                <!-- Table of Contents without height restriction -->
+                <TableOfContents lang={lang} />
               </div>
             </aside>
           </div>