From 79aa7f766973d81b60cd95bac26c14d7c2666484 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 6 Oct 2025 20:43:48 -0400
Subject: [PATCH] Ensure sidebar state shifts app layout

---
 .../iframe_forms/iframe-application-form.html |  2 +-
 .../iframe_forms/iframe-bug-fix-form.html     |  2 +-
 .../iframe-content-appeals-form.html          |  2 +-
 .../iframe_forms/iframe-feedback-form.html    |  2 +-
 .../iframe_forms/iframe-request-form.html     |  2 +-
 config/asset-version.js                       |  2 +-
 css/style.css                                 | 17 ++++++++--
 index.html                                    | 34 +++++++++++--------
 js/index.js                                   |  4 +++
 9 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/components/iframe_forms/iframe-application-form.html b/components/iframe_forms/iframe-application-form.html
index 380f40e2..723bee61 100644
--- a/components/iframe_forms/iframe-application-form.html
+++ b/components/iframe_forms/iframe-application-form.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Whitelist Application Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-bug-fix-form.html b/components/iframe_forms/iframe-bug-fix-form.html
index deb20533..36c2a077 100644
--- a/components/iframe_forms/iframe-bug-fix-form.html
+++ b/components/iframe_forms/iframe-bug-fix-form.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Bug Report Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-content-appeals-form.html b/components/iframe_forms/iframe-content-appeals-form.html
index 0c36a83c..d4c47ecf 100644
--- a/components/iframe_forms/iframe-content-appeals-form.html
+++ b/components/iframe_forms/iframe-content-appeals-form.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Content Appeals Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-feedback-form.html b/components/iframe_forms/iframe-feedback-form.html
index 36805194..c1d8f748 100644
--- a/components/iframe_forms/iframe-feedback-form.html
+++ b/components/iframe_forms/iframe-feedback-form.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid General Feedback Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/components/iframe_forms/iframe-request-form.html b/components/iframe_forms/iframe-request-form.html
index cdf3e6ae..469fb34e 100644
--- a/components/iframe_forms/iframe-request-form.html
+++ b/components/iframe_forms/iframe-request-form.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>bitvid Feature Request Form</title>
     <!-- Link to your main stylesheet -->
-    <link rel="stylesheet" href="../../css/style.css?v=2024.10.22" />
+    <link rel="stylesheet" href="../../css/style.css?v=2024.10.24" />
     <style>
       /* Override for form page to match modal field styling */
 
diff --git a/config/asset-version.js b/config/asset-version.js
index 05edddf3..89783825 100644
--- a/config/asset-version.js
+++ b/config/asset-version.js
@@ -1 +1 @@
-export const ASSET_VERSION = "2024.10.22";
+export const ASSET_VERSION = "2024.10.24";
diff --git a/css/style.css b/css/style.css
index d29f4fa3..6c1fe969 100644
--- a/css/style.css
+++ b/css/style.css
@@ -33,6 +33,7 @@
   --sidebar-width-collapsed: 4rem;
   --sidebar-width: var(--sidebar-width-expanded);
   --sidebar-control-size: 2.75rem;
+  --sidebar-content-gap: 1rem;
 }
 
 html {
@@ -1798,8 +1799,20 @@ body.sidebar-open #sidebarOverlay {
   }
 
   #app {
-    margin-left: var(--sidebar-width);
-    transition: margin-left 200ms ease;
+    box-sizing: border-box;
+    transition: margin-left 200ms ease, width 200ms ease, max-width 200ms ease;
+  }
+
+  #app[data-sidebar-state="collapsed"] {
+    margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));
+    width: calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));
+    max-width: calc(100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap));
+  }
+
+  #app[data-sidebar-state="expanded"] {
+    margin-left: calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));
+    width: calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));
+    max-width: calc(100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap));
   }
 
   body.sidebar-collapsed,
diff --git a/index.html b/index.html
index 924a971b..5c83b47e 100644
--- a/index.html
+++ b/index.html
@@ -50,10 +50,10 @@
       so browsers pick up the latest sidebar markup and styling without
       hard-refreshing around CDN caches.
     -->
-    <script src="js/tracking.js?v=2024.10.22" defer></script>
-    <link href="css/tailwind.generated.css?v=2024.10.22" rel="stylesheet" />
-    <link href="css/style.css?v=2024.10.22" rel="stylesheet" />
-    <link href="css/markdown.css?v=2024.10.22" rel="stylesheet" />
+    <script src="js/tracking.js?v=2024.10.24" defer></script>
+    <link href="css/tailwind.generated.css?v=2024.10.24" rel="stylesheet" />
+    <link href="css/style.css?v=2024.10.24" rel="stylesheet" />
+    <link href="css/markdown.css?v=2024.10.24" rel="stylesheet" />
   </head>
   <body class="sidebar-collapsed">
     <!--
@@ -79,7 +79,11 @@
       elements that should animate exactly once on initial paint.
     -->
 
-    <div id="app" class="px-4 py-8 min-h-screen flex flex-col fade-in">
+    <div
+      id="app"
+      class="px-4 py-8 min-h-screen flex flex-col fade-in"
+      data-sidebar-state="collapsed"
+    >
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->
@@ -211,16 +215,16 @@
 
     <!-- Additional Scripts -->
     <!-- Bootstraps nostr-tools before other modules rely on nostrToolsReady -->
-      <script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.22"></script>
-      <script type="module" src="js/config.js?v=2024.10.22"></script>
-      <script type="module" src="js/lists.js?v=2024.10.22"></script>
-      <script type="module" src="js/accessControl.js?v=2024.10.22"></script>
-      <script type="module" src="js/webtorrent.js?v=2024.10.22"></script>
-      <script type="module" src="js/nostr.js?v=2024.10.22"></script>
-    <script type="module" src="js/viewManager.js?v=2024.10.22"></script>
-    <script type="module" src="js/bootstrap.js?v=2024.10.22"></script>
-    <script type="module" src="js/disclaimer.js?v=2024.10.22"></script>
-    <script type="module" src="js/index.js?v=2024.10.22"></script>
+      <script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.24"></script>
+      <script type="module" src="js/config.js?v=2024.10.24"></script>
+      <script type="module" src="js/lists.js?v=2024.10.24"></script>
+      <script type="module" src="js/accessControl.js?v=2024.10.24"></script>
+      <script type="module" src="js/webtorrent.js?v=2024.10.24"></script>
+      <script type="module" src="js/nostr.js?v=2024.10.24"></script>
+    <script type="module" src="js/viewManager.js?v=2024.10.24"></script>
+    <script type="module" src="js/bootstrap.js?v=2024.10.24"></script>
+    <script type="module" src="js/disclaimer.js?v=2024.10.24"></script>
+    <script type="module" src="js/index.js?v=2024.10.24"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
   </body>
diff --git a/js/index.js b/js/index.js
index b3d63d7b..65313372 100644
--- a/js/index.js
+++ b/js/index.js
@@ -238,6 +238,10 @@ async function bootstrapInterface() {
       element.style.setProperty("--sidebar-width", nextWidth);
     });
 
+    if (appShell instanceof HTMLElement) {
+      appShell.dataset.sidebarState = state;
+    }
+
     [sidebar, document.body]
       .filter((element) => element instanceof HTMLElement)
       .forEach((element) => {