feat: implement fixed sidebar for improved navigation on mobile

about.html

@@ -54,6 +54,9 @@ <h1 class="header-branding">Social Reader</h1>
       </p>
     </div>
   </div>
+  <div class="right-column">
+    <!-- This is an empty column to balance the layout -->
+  </div>
 </div>
 <script type="module" src="followed-accounts.js"></script>
 <script type="module" src="./theme-selector.js"></script>

followed-accounts.html

@@ -48,6 +48,9 @@ <h1 class="header-branding">Social Reader</h1>
       list.</span
     >
   </div>
+  <div class="right-column">
+    <!-- This is an empty column to balance the layout -->
+  </div>
 </div>
 <script>
   document

index.html

@@ -27,6 +27,9 @@ <h1 class="header-branding">Social Reader</h1>
     </nav>
   </div>
   <reader-timeline></reader-timeline>
+  <div class="right-column">
+    <!-- This is an empty column to balance the layout -->
+  </div>
 </div>
 <script type="module" src="./dbInstance.js"></script>
 <script type="module" src="./timeline.js"></script>

profile.html

@@ -35,6 +35,9 @@ <h1 class="header-branding">Social Reader</h1>
       <button id="nextPage">Next ></button>
     </div>
   </div>
+  <div class="right-column">
+    <!-- This is an empty column to balance the layout -->
+  </div>
 </div>
 <script>
   // Pagination controls

timeline.css

@@ -6,25 +6,31 @@ body {
   align-items: flex-start;
   min-height: 100vh;
   font-family: var(--rdp-font);
+  background: var(--bg-color);
 }
 
 .container {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: space-between;
   max-width: 1200px;
   width: 100%;
   margin-top: 20px;
+  position: relative;
 }
 
 .header-branding {
   color: var(--rdp-text-color);
 }
 
 .sidebar {
+  position: sticky;
+  top: 0;
+  flex: 0 0 250px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  height: 100vh;
+  overflow-y: auto;
 }
 
 .sidebar h1 {
@@ -67,6 +73,22 @@ reader-timeline {
   margin: 0 20px;
 }
 
+/* Empty right column for balance */
+.right-column {
+  flex: 0 0 200px;
+}
+
+@media screen and (max-width: 1280px) {
+  .sidebar {
+    flex: 0 0 200px;
+    margin-left: 14px;
+  }
+
+  .right-column {
+    flex: 0 0 100px;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .container {
     flex-direction: column;
@@ -78,11 +100,10 @@ reader-timeline {
     position: fixed;
     top: 0;
     z-index: 100;
-    max-height: 100vh;
+    max-height: calc(100vh - 82vh);
     overflow-y: auto;
     align-items: center;
     background-color: var(--bg-color);
-    padding: 10px;
   }
 
   .sidebar h1 {
@@ -100,3 +121,9 @@ reader-timeline {
     margin-top: 150px;
   }
 }
+
+@media screen and (max-width: 400px) {
+  .sidebar {
+    padding-bottom: 50px;
+  }
+}