From 54d5a7732956f3b073cc875d0f9abc1e3e0f7c1f Mon Sep 17 00:00:00 2001
From: Caleb Braaten <git@cbraaten.dev>
Date: Tue, 20 Jan 2026 13:47:55 -0800
Subject: [PATCH] Move scrollbar into Post Archive component instead of aside

---
 src/frontend/components/post-archive.tsx | 68 ++++++++++++------------
 src/frontend/styles.css                  | 28 +++++++++-
 2 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/src/frontend/components/post-archive.tsx b/src/frontend/components/post-archive.tsx
index 3ef0b98..6ff0c03 100644
--- a/src/frontend/components/post-archive.tsx
+++ b/src/frontend/components/post-archive.tsx
@@ -39,39 +39,41 @@ export function PostArchive() {
     return (
         <div className="postList sheet-background">
             <h3>Posts</h3>
-            <ul className="post-archive">
-                {archiveData.map((yearData) => (
-                    <li key={yearData.year}>
-                        <div className="archive-year" tabIndex={0} role="button" aria-expanded="true">
-                            <span className="archive-toggle expanded">▼</span>
-                            <span>{yearData.year}</span>
-                            <span className="post-count">{yearData.count}</span>
-                        </div>
-                        <div className="archive-content expanded">
-                            <ul className="archive-months">
-                                {yearData.months.map((monthData) => (
-                                    <li key={monthData.name}>
-                                        <div className="archive-month" tabIndex={0} role="button" aria-expanded="true">
-                                            <span className="archive-toggle expanded">▼</span>
-                                            <span>{monthData.name}</span>
-                                            <span className="post-count">{monthData.count}</span>
-                                        </div>
-                                        <div className="archive-content expanded">
-                                            <ul className="archive-posts">
-                                                {monthData.posts.map((post) => (
-                                                    <li key={post.href} className="archive-post">
-                                                        <a href={post.href} tabIndex={-1}>{post.title}</a>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        </div>
-                                    </li>
-                                ))}
-                            </ul>
-                        </div>
-                    </li>
-                ))}
-            </ul>
+            <div className="archive-container">
+                <ul className="post-archive">
+                    {archiveData.map((yearData) => (
+                        <li key={yearData.year}>
+                            <div className="archive-year" tabIndex={0} role="button" aria-expanded="true">
+                                <span className="archive-toggle expanded">▼</span>
+                                <span>{yearData.year}</span>
+                                <span className="post-count">{yearData.count}</span>
+                            </div>
+                            <div className="archive-content expanded">
+                                <ul className="archive-months">
+                                    {yearData.months.map((monthData) => (
+                                        <li key={monthData.name}>
+                                            <div className="archive-month" tabIndex={0} role="button" aria-expanded="true">
+                                                <span className="archive-toggle expanded">▼</span>
+                                                <span>{monthData.name}</span>
+                                                <span className="post-count">{monthData.count}</span>
+                                            </div>
+                                            <div className="archive-content expanded">
+                                                <ul className="archive-posts">
+                                                    {monthData.posts.map((post) => (
+                                                        <li key={post.href} className="archive-post">
+                                                            <a href={post.href} tabIndex={-1}>{post.title}</a>
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            </div>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            </div>
             <script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} />
         </div>
     )
diff --git a/src/frontend/styles.css b/src/frontend/styles.css
index 6026c13..41c62b5 100644
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@@ -167,7 +167,6 @@ aside {
     position: sticky;
     top: 0;
     max-height: 100vh;
-    overflow-y: auto;
 }
 
 .pagination {
@@ -612,6 +611,12 @@ h1 {
     font-weight: 600;
 }
 
+.archive-container {
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: 5px;
+}
+
 .post-archive {
     list-style: none;
     padding: 0;
@@ -721,6 +726,27 @@ h1 {
     margin-left: auto;
 }
 
+/* Custom scrollbar styling for archive container */
+.archive-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.archive-container::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+    border-radius: 3px;
+}
+
+.archive-container::-webkit-scrollbar-thumb {
+    background: var(--text-secondary);
+    border-radius: 3px;
+}
+
+.archive-container::-webkit-scrollbar-thumb:hover {
+    background: var(--text-primary);
+}
+    margin-left: auto;
+}
+
 /* Blog Post Styles */
 .blog-post {
     max-width: 750px;