fix(css): sidebar can no longer be larger than 80% of viewport width

Author: lolbinarycat

src/front-end/css/variables.css

@@ -2,7 +2,8 @@
 /* Globals */
 
 :root {
-    --sidebar-width: 300px;
+    --sidebar-target-width: 300px;
+    --sidebar-width: min(var(--sidebar-target-width), 80vw);
     --sidebar-resize-indicator-width: 8px;
     --sidebar-resize-indicator-space: 2px;
     --page-padding: 15px;

src/front-end/js/book.js

@@ -557,9 +557,9 @@ aria-label="Show hidden lines"></button>';
     sidebarToggleAnchor.addEventListener('change', function sidebarToggle() {
         if (sidebarToggleAnchor.checked) {
             const current_width = parseInt(
-                document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
+                document.documentElement.style.getPropertyValue('--sidebar-target-width'), 10);
             if (current_width < 150) {
-                document.documentElement.style.setProperty('--sidebar-width', '150px');
+                document.documentElement.style.setProperty('--sidebar-target-width', '150px');
             }
             showSidebar();
         } else {
@@ -583,7 +583,7 @@ aria-label="Show hidden lines"></button>';
                 showSidebar();
             }
             pos = Math.min(pos, window.innerWidth - 100);
-            document.documentElement.style.setProperty('--sidebar-width', pos + 'px');
+            document.documentElement.style.setProperty('--sidebar-target-width', pos + 'px');
         }
     }
     //on mouseup remove windows functions mousemove & mouseup