Move scrollbar into Post Archive component instead of aside

src/frontend/components/post-archive.tsx

@@ -39,6 +39,7 @@ export function PostArchive() {
     return (
         <div className="postList sheet-background">
             <h3>Posts</h3>
+            <div className="archive-container">
                 <ul className="post-archive">
                     {archiveData.map((yearData) => (
                         <li key={yearData.year}>
@@ -72,6 +73,7 @@ export function PostArchive() {
                         </li>
                     ))}
                 </ul>
+            </div>
             <script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} />
         </div>
     )

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;