From c729fa8a60b1ee910c96fb83ce7cdd37a1d0db27 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Tue, 3 Mar 2026 17:13:59 -0800
Subject: [PATCH] fix(style): fix dark mode sidebar gap by using page-level
 background

Applies the dark translucent background to the .page element itself rather than individual sidebar/panel elements, ensuring full-height coverage with no gaps when scrolling.
---
 src/styles/style.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/styles/style.css b/src/styles/style.css
index 8bdc8b1..87a2f57 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -33,7 +33,7 @@ html[data-theme="dark"] {
   /* Dark theme uses darker colors for background, lighter for text */
 
   .page {
-    --background-color: var(--witch-purple-translucent);
+    --background-color: transparent;
   }
   --primary-color: var(--witch-lavender);
   --sl-color-text-accent: var(--witch-lavender);
@@ -70,11 +70,15 @@ html[data-theme="dark"] {
 }
 
 .sidebar-pane,
-.right-sidebar-panel {
+.right-sidebar {
   background-color: var(--background-color);
   color: var(--primary-color);
 }
 
+.right-sidebar-panel {
+  color: var(--primary-color);
+}
+
 h1,
 h2,
 h3,
@@ -90,6 +94,10 @@ a {
   backdrop-filter: var(--content-blur);
 }
 
+html[data-theme="dark"] .page {
+  background: var(--witch-purple-translucent);
+}
+
 a[aria-current="page"] {
   color: var(--background-color) !important;
   background-color: var(--witch-rose) !important;