From a54ee0215e40801f603d7f64e06934db3ca7d369 Mon Sep 17 00:00:00 2001 From: binarycat Date: Fri, 25 Apr 2025 14:29:58 -0500 Subject: [PATCH] fix(css): sidebar can no longer be larger than 80% of viewport width --- src/front-end/css/variables.css | 3 ++- src/front-end/js/book.js | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) 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">'; 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">'; 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