From c17a39588d019446b464c0a186c55c179fd94b5b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 10 Oct 2025 17:19:14 +0100
Subject: [PATCH] refactor: DRY mobile sidepane styles - unified overlay
 behavior

---
 src/index.css | 45 +++++++++++++++++++++------------------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/index.css b/src/index.css
index 46826371..f3cd7187 100644
--- a/src/index.css
+++ b/src/index.css
@@ -594,19 +594,26 @@ body.mobile-sidebar-open {
 
 /* Mobile pane styles */
 @media (max-width: 768px) {
-  .pane.sidebar {
+  /* Both sidepanes slide in as overlays */
+  .pane.sidebar,
+  .pane.highlights {
     position: fixed;
     top: 0;
-    left: 0;
     width: 85%;
     max-width: 320px;
     height: 100vh;
     height: 100dvh;
     background: #1a1a1a;
     z-index: 1000;
-    transform: translateX(-100%);
     transition: transform 0.3s ease;
     box-shadow: none;
+    display: flex;
+  }
+  
+  /* Bookmarks sidebar from left */
+  .pane.sidebar {
+    left: 0;
+    transform: translateX(-100%);
   }
   
   .pane.sidebar.mobile-open {
@@ -614,6 +621,17 @@ body.mobile-sidebar-open {
     box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
   }
   
+  /* Highlights sidebar from right */
+  .pane.highlights {
+    right: 0;
+    transform: translateX(100%);
+  }
+  
+  .pane.highlights.mobile-open {
+    transform: translateX(0);
+    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
+  }
+  
   .pane.main {
     grid-column: 1;
     grid-row: 1;
@@ -628,27 +646,6 @@ body.mobile-sidebar-open {
     pointer-events: none;
   }
   
-  .pane.highlights {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 85%;
-    max-width: 320px;
-    height: 100vh;
-    height: 100dvh;
-    background: #1a1a1a;
-    z-index: 1000;
-    transform: translateX(100%);
-    transition: transform 0.3s ease;
-    box-shadow: none;
-    display: flex;
-  }
-  
-  .pane.highlights.mobile-open {
-    transform: translateX(0);
-    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
-  }
-  
   .mobile-sidebar-backdrop {
     display: none;
     position: fixed;