04/19 Continue fixing the UI issues with Chrome

2026-04-19 09:40:48 -04:00
parent d2240bc4d7
commit 562cb85de9
6 changed files with 1351 additions and 2808 deletions
@@ -0,0 +1,26 @@
+/**
+ * layout-init.js — runs synchronously in <head> before body renders.
+ *
+ * Sets html.is-mobile or html.is-desktop immediately so CSS scoped to
+ * those classes takes effect on the very first paint. No flash, no
+ * layout shift, works on Chrome and Safari equally.
+ *
+ * Also restores the sidebar collapsed state on desktop so the sidebar
+ * width is correct from the very first frame.
+ *
+ * Must be loaded with NO defer/async attribute so it blocks parsing
+ * until it runs — that's intentional and necessary.
+ */
+(function () {
+    var isMobile = window.matchMedia('(max-width: 768px)').matches;
+    document.documentElement.classList.add(isMobile ? 'is-mobile' : 'is-desktop');
+
+    // On desktop, restore collapsed state from localStorage so the sidebar
+    // renders at the correct width without any visual jump.
+    if (!isMobile && localStorage.getItem('sidebar_collapsed') === '1') {
+        // We can't set it on #sidebar yet (body not parsed), so we use a
+        // temporary html class that CSS can target, then vault.js adds
+        // .collapsed to the sidebar element on DOMContentLoaded.
+        document.documentElement.classList.add('sidebar-will-collapse');
+    }
+})();