Merge pull request #1994 from Skwodo/master

fix overflow-x on mobile
2023-02-08 15:37:53 -08:00 · 2023-02-08 15:37:53 -08:00 · e352e4f59c
parent 0e1384b4d2 734936d819
commit e352e4f59c
2 changed files with 15 additions and 0 deletions
--- 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,
--- 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>