Merge pull request #1994 from Skwodo/master

ehuss · web-flow · commit e352e4f59cbd · 2023-02-08T15:37:53.000-08:00
fix overflow-x on mobile
diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
@@ -12,6 +12,19 @@ a > .hljs {
     color: var(--links);
 }
 
+/*
+    body-container is necessary because mobile browsers don't seem to like
+    overflow-x on the body tag when there is a <meta name="viewport"> tag.
+*/
+#body-container {
+    /*
+        This is used when the sidebar pushes the body content off the side of
+        the screen on small screens. Without it, dragging on mobile Safari
+        will want to reposition the viewport in a weird way.
+    */
+    overflow-x: hidden;
+}
+
 /* Menu Bar */
 
 #menu-bar,
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
@@ -54,6 +54,7 @@
         {{/if}}
     </head>
     <body>
+    <div id="body-container">
         <!-- Provide site root to javascript -->
         <script>
             var path_to_root = "{{ path_to_root }}";
@@ -309,5 +310,6 @@
         {{/if}}
         {{/if}}
 
+    </div>
     </body>
 </html>
