hotfix: use wrapper to fix scrollbar misalignments

index.html

@@ -50,6 +50,7 @@
       <nav id="tab-list"></nav>
       <section id="tabs">
         <div class="page center" id="Welcome" data-tab="$Welcome">
+          <div class="wrapper">
             <header>
               <img class="icon" src="assets/images/outline.svg" />
               <img class="type" src="assets/images/type.svg" />
@@ -63,18 +64,18 @@
               <ul>
                 <li>
                   It's being built with smaller windows in mind (think SS13
-                popups), large window format is planned but it's just not there
+                  popups), large window format is planned but it's just not
-                yet.
+                  there yet.
                 </li>
                 <li>
-                There is a lot of development still happening, so many parts are
+                  There is a lot of development still happening, so many parts
-                not as polished as they should be.
+                  are not as polished as they should be.
                 </li>
               </ul>
               <p>
                 Click any guide in the top menu to open it or
-              <a href="#" id="welcome_expand">click here</a> to learn about some
+                <a href="#" id="welcome_expand">click here</a> to learn about
-              of the extra features packed in.
+                some of the extra features packed in.
               </p>
             </div>
             <div class="features">
@@ -84,8 +85,8 @@
               <div class="maxw">
                 <h3 class="nobg">Jump to section/item</h3>
                 <p>
-                Press <b>SHIFT+S</b> on any page (except this one) to open up a
+                  Press <b>SHIFT+S</b> on any page (except this one) to open up
-                quick search menu.
+                  a quick search menu.
                 </p>
                 <p>
                   Results for most pages are section titles, but some pages like
@@ -104,8 +105,9 @@
                   />
                 </div>
                 <p>
-                By default, only results for the current page are shown, you can
+                  By default, only results for the current page are shown, you
-                use <code>@</code> as prefix to search in all guides at once.
+                  can use <code>@</code> as prefix to search in all guides at
+                  once.
                 </p>
                 <h3 class="nobg">(Chemistry) Auto-Expanded tooltips</h3>
                 <p>
@@ -115,12 +117,14 @@
                 <h3 class="nobg">(Chemistry) Beaker sizing</h3>
                 <p>
                   Press <b>SHIFT+B</b> to set your target reagent output and the
-                inputs will change from "part" to "ml". This is currently quite
+                  inputs will change from "part" to "ml". This is currently
-                inaccurate, use it as a guideline but apply common sense.
+                  quite inaccurate, use it as a guideline but apply common
+                  sense.
                 </p>
               </div>
             </div>
           </div>
+        </div>
       </section>
     </main>
     <noscript>

src/ui/TabManager.ts

@@ -31,6 +31,9 @@ async function loadPage(
   let html: string | null = null;
   const key = `page:${page}`;
 
+  const wrapper = document.createElement("div");
+  wrapper.className = "wrapper";
+
   // Check cache for pre-processed page
   if (useCache) {
     try {
@@ -73,30 +76,27 @@ async function loadPage(
     await nextAnimationFrame();
 
     // Set as HTML content and run HTML manipulations on it
-    const div = elem.cloneNode(false) as HTMLDivElement;
+    wrapper.innerHTML = html;
-    div.innerHTML = html;
 
     console.log(`${page}: processing`);
-    processHTML(div, page);
+    processHTML(wrapper, page);
 
     // Get version to set
     const version =
       page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
 
     // Save result to cache
-    cache.set(key, div.innerHTML, version).then(() => {
+    cache.set(key, wrapper.innerHTML, version).then(() => {
       console.log(`${page}: saved to cache`);
     });
-
-    elem.replaceWith(div);
-    elem = div;
   } else {
     // Set cached content as HTML
-    elem.innerHTML = html;
+    wrapper.innerHTML = html;
 
     postProcessHTML(elem, page); // noop in prod, used in dev for testing candidate DOM changes
   }
 
+  elem.innerHTML = wrapper.outerHTML;
   bindFunctions(elem, page);
   elem.classList.remove("waiting");
 

style/pages/global.scss

@@ -34,9 +34,6 @@ $max-width: 960px;
 }
 
 .page {
-  max-width: $max-width;
-  margin: 0 auto;
-
   h1.pageheader {
     margin-top: 0;
     padding: 15pt 10pt;
@@ -78,3 +75,8 @@ $max-width: 960px;
     align-items: center;
   }
 }
+
+.wrapper {
+  margin: 0 auto;
+  max-width: $max-width;
+}

style/ui.scss

@@ -23,7 +23,11 @@ body {
 }
 
 body {
-    background: linear-gradient(to bottom, darken($nanotrasen, 20%), darken($nanotrasen, 10%));
+  background: linear-gradient(
+    to bottom,
+    darken($nanotrasen, 20%),
+    darken($nanotrasen, 10%)
+  );
   background-size: 100% 100%;
   background-attachment: fixed;
   color: #fff;
@@ -50,7 +54,12 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-    background: linear-gradient(to bottom, darken($nanotrasen, 0%), darken($nanotrasen, 10%), darken($nanotrasen, 0%));
+  background: linear-gradient(
+    to bottom,
+    darken($nanotrasen, 0%),
+    darken($nanotrasen, 10%),
+    darken($nanotrasen, 0%)
+  );
   border: 1px solid lighten($nanotrasen, 10%);
 }
 
@@ -84,13 +93,14 @@ body {
   flex: 1;
   z-index: 1;
   display: grid;
-    overflow: auto;
+  overflow: hidden;
   .page {
     //visibility: hidden;
     will-change: display;
     &:not(.active) {
       display: none;
     }
+    overflow: auto;
     grid-row: 1;
     grid-column: 1;
     &.active {