From 03628ec4b1dc418c083aaacfa0ade502b8737484 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sat, 2 Jul 2022 20:29:24 +0200
Subject: [PATCH] theme: align content with topbar icon limits #290

---
 exampleSite/content/tests/width.en.md | 12 ++++++++++++
 static/css/print.css                  |  2 +-
 static/css/theme.css                  | 13 +++++++++++--
 static/js/theme.js                    | 27 +++++++++++++++++++++++++++
 4 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 exampleSite/content/tests/width.en.md

diff --git a/exampleSite/content/tests/width.en.md b/exampleSite/content/tests/width.en.md
new file mode 100644
index 0000000000..427424cebb
--- /dev/null
+++ b/exampleSite/content/tests/width.en.md
@@ -0,0 +1,12 @@
++++
+description = "Test dynamic width resizing of content if scrollbar is present"
+title = "Width"
++++
+
+{{% notice primary %}}
+Make a visible block
+{{% /notice %}}
+
+{{% notice primary %}}
+And another one
+{{% /notice %}}
diff --git a/static/css/print.css b/static/css/print.css
index 53aa5c53f7..bd7583058b 100644
--- a/static/css/print.css
+++ b/static/css/print.css
@@ -85,7 +85,7 @@ body,
 }
 #body #body-inner {
     /* reset paddings for chapters in screen */
-    padding: 0 3rem 4rem 3rem;
+    padding: 0 3.25rem 4rem 3.25rem;
 }
 
 #body #body-inner h1 {
diff --git a/static/css/theme.css b/static/css/theme.css
index 912c8f0a01..345486e8e7 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -364,12 +364,12 @@ th {
     flex: auto;
     flex-direction: column;
     overflow-y: auto;
-    padding: 0 3rem 4rem 3rem;
+    padding: 0 3.25rem 4rem 3.25rem;
     position: relative; /* PS */
 }
 @media screen and (max-width: 59.938em) {
     #body-inner {
-        padding: 0 2rem 15px 2rem;
+        padding: 0 2.25rem 15px 2.25rem;
     }
 }
 @media screen and (max-width: 47.938em) {
@@ -1436,3 +1436,12 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 .math.align-right > mjx-container{
     text-align: right !important;
 }
+
+.scrollbar-measure {
+    /* https://davidwalsh.name/detect-scrollbar-width */
+	height: 100px;
+	overflow: scroll;
+	position: absolute;
+	width: 100px;
+	top: -9999px;
+}
diff --git a/static/js/theme.js b/static/js/theme.js
index 89a7a356fa..ae7d8b6209 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -22,6 +22,19 @@ var psc;
 var psm;
 var pst;
 
+function scrollbarWidth(){
+    // https://davidwalsh.name/detect-scrollbar-width
+    // Create the measurement node
+    var scrollDiv = document.createElement("div");
+    scrollDiv.className = "scrollbar-measure";
+    document.body.appendChild(scrollDiv);
+    // Get the scrollbar width
+    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    // Delete the DIV
+    document.body.removeChild(scrollDiv);
+    return scrollbarWidth;
+}
+
 function switchTab(tabGroup, tabId) {
     var tabs = jQuery(".tab-panel").has("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
     var allTabItems = tabs.find("[data-tab-group='"+tabGroup+"']");
@@ -380,6 +393,20 @@ function initMenuScrollbar(){
             psm && psm.update();
         });
     });
+
+    // finally, we want to adjust the contents right padding if there is a scrollbar visible
+    var scrollbarSize = scrollbarWidth();
+    function adjustContentWidth(){
+        var left = parseFloat( getComputedStyle( elc ).getPropertyValue( 'padding-left' ) );
+        var right = left;
+        if( elc.scrollHeight > elc.clientHeight ){
+            // if we have a scrollbar reduce the right margin by the scrollbar width
+            right = Math.max( 0, left - scrollbarSize );
+        }
+        elc.style[ 'padding-right' ] = '' + right + 'px';
+    }
+    window.addEventListener('resize', adjustContentWidth );
+    adjustContentWidth();
 }
 
 function initLightbox(){