diff --git a/src/front-end/css/variables.css b/src/front-end/css/variables.css
index 6a692ae7b0..43eb9e0c51 100644
--- a/src/front-end/css/variables.css
+++ b/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;
diff --git a/src/front-end/js/book.js b/src/front-end/js/book.js
index 160ee93700..e54da6a0dd 100644
--- a/src/front-end/js/book.js
+++ b/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