From b669e1d0c8f6f8d96eb7070f82e0791abd3d8e44 Mon Sep 17 00:00:00 2001
From: Lenox Wiltshire <lenoxwiltshire@gmail.com>
Date: Thu, 25 Jun 2026 19:04:21 -0400
Subject: [PATCH 1/3] [feat]: abstract layout resizers styling into its own
 file

Signed-off-by: Lenox Wiltshire <lenoxwiltshire@gmail.com>
---
 assets/scss/_layout-resizers.scss | 85 ++++++++++++++++++++++++++++
 assets/scss/_styles_project.scss  | 92 +------------------------------
 2 files changed, 88 insertions(+), 89 deletions(-)
 create mode 100644 assets/scss/_layout-resizers.scss

diff --git a/assets/scss/_layout-resizers.scss b/assets/scss/_layout-resizers.scss
new file mode 100644
index 00000000000..a09073833c1
--- /dev/null
+++ b/assets/scss/_layout-resizers.scss
@@ -0,0 +1,85 @@
+// Left sidebar & Right sidebar Resize
+:root {
+  --left-sidebar-width: 240px;
+  --toc-width: 240px;
+
+  --left-sidebar-min-width: 180px;
+  --left-sidebar-max-width: 500px;
+
+  --toc-min-width: 180px;
+  --toc-max-width: 400px;
+
+  --sidebar-resize-width: 5px;
+}
+
+.layout-resizer {
+  width: var(--sidebar-resize-width);
+  cursor: col-resize;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+  z-index: 1; //Must be lower than the sticky header
+}
+
+.layout-resizer:hover,
+.layout-resizer.is-dragging {
+  background-color: #00b39f;
+}
+
+.td-resizable-grid .td-sidebar,
+.td-resizable-grid .td-sidebar-toc,
+.td-resizable-grid main[role="main"] {
+  width: auto;
+}
+
+@media (min-width: 768px) {
+  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
+    display: grid;
+    grid-template-columns:
+      var(--left-sidebar-width)
+      var(--sidebar-resize-width)
+      1fr;
+  }
+
+  .td-sidebar {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #left-resizer {
+    grid-column: 2;
+    grid-row: 1;
+    padding-left: 0;
+    padding-right: 0;
+    box-sizing: border-box;
+  }
+
+  main[role="main"] {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+
+@media (min-width: 1200px) {
+  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
+    display: grid;
+    grid-template-columns:
+      var(--left-sidebar-width)
+      var(--sidebar-resize-width)
+      1fr
+      var(--sidebar-resize-width)
+      var(--toc-width);
+  }
+
+  #right-resizer {
+    grid-column: 4;
+    grid-row: 1;
+    padding-left: 0;
+    padding-right: 0;
+    box-sizing: border-box;
+  }
+
+  .td-sidebar-toc {
+    grid-column: 5;
+    grid-row: 1;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 6766bab163f..837a34ec248 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -394,92 +394,6 @@ a:not([href]):not([class]):hover {
   }
 }
 
-// Left sidebar & Right sidebar Resize
-:root {
-  --left-sidebar-width: 240px;
-  --toc-width: 240px;
-
-  --left-sidebar-min-width: 180px;
-  --left-sidebar-max-width: 500px;
-
-  --toc-min-width: 180px;
-  --toc-max-width: 400px;
-
-  --sidebar-resize-width: 5px;
-}
-
-.layout-resizer {
-  width: var(--sidebar-resize-width);
-  cursor: col-resize;
-  background-color: rgba(0, 0, 0, 0.03);
-  transition: background-color 0.15s ease;
-  z-index: 1; //Must be lower than the sticky header
-}
-
-.layout-resizer:hover,
-.layout-resizer.is-dragging {
-  background-color: $primary;
-}
-
-.td-resizable-grid .td-sidebar,
-.td-resizable-grid .td-sidebar-toc,
-.td-resizable-grid main[role="main"] {
-  width: auto;
-}
-
-@media (min-width: 768px) {
-  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
-    display: grid;
-    grid-template-columns:
-      var(--left-sidebar-width)
-      var(--sidebar-resize-width)
-      1fr;
-  }
-
-  .td-sidebar {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  #left-resizer {
-    grid-column: 2;
-    grid-row: 1;
-    padding-left: 0;
-    padding-right: 0;
-    box-sizing: border-box;
-  }
-
-  main[role="main"] {
-    grid-column: 3;
-    grid-row: 1;
-  }
-}
-
-@media (min-width: 1200px) {
-  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
-    display: grid;
-    grid-template-columns:
-      var(--left-sidebar-width)
-      var(--sidebar-resize-width)
-      1fr
-      var(--sidebar-resize-width)
-      var(--toc-width);
-  }
-
-  #right-resizer {
-    grid-column: 4;
-    grid-row: 1;
-    padding-left: 0;
-    padding-right: 0;
-    box-sizing: border-box;
-  }
-
-  .td-sidebar-toc {
-    grid-column: 5;
-    grid-row: 1;
-  }
-}
-
 // pageinfo
 .pageinfo {
   font-weight: $font-weight-medium;
@@ -610,7 +524,7 @@ a:not([href]):not([class]):hover {
   margin-bottom: 4rem;
   font-size: 5rem;
   text-align: left;
-  background-image: 
+  background-image:
     linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255,243,197) 100%);
   background-position:
     0% 0%,
@@ -706,11 +620,11 @@ a:not([href]):not([class]):hover {
 .dash-sign-container {
   display: flex;
   align-items: center;
-  justify-content: space-between; 
+  justify-content: space-between;
   text-align: right;
 
   h1.dashboard {
-    max-width: 70%;        
+    max-width: 70%;
     text-align: left;
     flex-shrink: 0;
     @media (max-width: 768px) {

From 7e2ee8dcc4e6a5db5be04ff19a7eafd18e03f92a Mon Sep 17 00:00:00 2001
From: Lenox Wiltshire <lenoxwiltshire@gmail.com>
Date: Thu, 25 Jun 2026 22:41:03 -0400
Subject: [PATCH 2/3] [chore]: scss rule rewrite

Signed-off-by: Lenox Wiltshire <lenoxwiltshire@gmail.com>
---
 assets/js/sidebar-resizer.js      |  2 +-
 assets/scss/_layout-resizers.scss | 42 ++++++++++++++++++-------------
 assets/scss/_styles_project.scss  |  1 +
 layouts/docs/baseof.html          |  9 ++++---
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/assets/js/sidebar-resizer.js b/assets/js/sidebar-resizer.js
index d0102c4fc05..8cb82dd940b 100644
--- a/assets/js/sidebar-resizer.js
+++ b/assets/js/sidebar-resizer.js
@@ -1,6 +1,6 @@
 (function () {
     document.addEventListener("DOMContentLoaded", () => {
-        const gridContainer = document.querySelector(".td-resizable-grid .td-main > .row.flex-xl-nowrap");
+        const gridContainer = document.querySelector(".r-grid-container");
         const leftResizer = document.getElementById("left-resizer");
         const rightResizer = document.getElementById("right-resizer");
 
diff --git a/assets/scss/_layout-resizers.scss b/assets/scss/_layout-resizers.scss
index a09073833c1..6dd483f04fb 100644
--- a/assets/scss/_layout-resizers.scss
+++ b/assets/scss/_layout-resizers.scss
@@ -25,14 +25,14 @@
   background-color: #00b39f;
 }
 
-.td-resizable-grid .td-sidebar,
-.td-resizable-grid .td-sidebar-toc,
-.td-resizable-grid main[role="main"] {
+.r-grid-container .r-sidebar,
+.r-grid-container .r-sidebar-toc,
+.r-grid-container .r-main {
   width: auto;
 }
 
 @media (min-width: 768px) {
-  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
+  .r-grid-container {
     display: grid;
     grid-template-columns:
       var(--left-sidebar-width)
@@ -40,7 +40,7 @@
       1fr;
   }
 
-  .td-sidebar {
+  .r-sidebar {
     grid-column: 1;
     grid-row: 1;
   }
@@ -53,14 +53,14 @@
     box-sizing: border-box;
   }
 
-  main[role="main"] {
+  .r-main {
     grid-column: 3;
     grid-row: 1;
   }
 }
 
 @media (min-width: 1200px) {
-  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
+    .r-grid-container {
     display: grid;
     grid-template-columns:
       var(--left-sidebar-width)
@@ -68,18 +68,24 @@
       1fr
       var(--sidebar-resize-width)
       var(--toc-width);
-  }
 
-  #right-resizer {
-    grid-column: 4;
-    grid-row: 1;
-    padding-left: 0;
-    padding-right: 0;
-    box-sizing: border-box;
-  }
 
-  .td-sidebar-toc {
-    grid-column: 5;
-    grid-row: 1;
+    #right-resizer {
+        grid-column: 4;
+        grid-row: 1;
+        padding-left: 0;
+        padding-right: 0;
+        box-sizing: border-box;
+    }
+
+    .r-sidebar-toc {
+        grid-column: 5;
+        grid-row: 1;
+    }
+
+    .r-main {
+        grid-column: 3;
+        grid-row: 1;
+    }
   }
 }
\ No newline at end of file
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 837a34ec248..c8c2fcbe3ab 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -15,6 +15,7 @@
 @import "elements_project";
 @import "summary.scss";
 @import "_kanvas-corner-popup.scss";
+@import "_layout-resizers.scss";
 
 .navbar-dark {
   min-height: 5rem;
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index f66c4a5f5be..1835e9d9b10 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -10,21 +10,22 @@
   <header>{{ partial "navbar.html" . }}</header>
   <div class="container-fluid td-outer td-resizable-grid">
     <div class="td-main">
-      <div class="row flex-xl-nowrap">
-        <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+      <div class="row flex-xl-nowrap r-grid-container">
+        <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none r-sidebar">
           {{ partial "sidebar.html" . }}
         </aside>
 
         <div class="layout-resizer d-none d-md-block" id="left-resizer"></div>
 
         <div class="layout-resizer d-none d-xl-block" id="right-resizer"></div>
-        <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
+
+        <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none r-sidebar-toc">
           {{ partial "page-meta-links.html" . }}
           {{ partial "toc.html" . }}
           {{ partial "taxonomy_terms_clouds.html" . }}
         </aside>
 
-        <main class="col-12 col-md-9 col-xl-8" role="main">
+        <main class="col-12 col-md-9 col-xl-8 r-main" role="main">
           {{ partial "version-banner.html" . }}
           <div class="page-header d-flex justify-content-between align-items-center">
             {{ if not .Site.Params.ui.breadcrumb_disable }}

From b9841b5ead0d5f64a9a63a3f2c777049feb120a9 Mon Sep 17 00:00:00 2001
From: Lenox Wiltshire <lenoxwiltshire@gmail.com>
Date: Fri, 26 Jun 2026 03:09:43 -0400
Subject: [PATCH 3/3] [chore]: fix sidebar local storage load

Signed-off-by: Lenox Wiltshire <lenoxwiltshire@gmail.com>
---
 assets/js/sidebar-load-width.js   |  2 +-
 assets/scss/_layout-resizers.scss | 24 ++++++++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/assets/js/sidebar-load-width.js b/assets/js/sidebar-load-width.js
index 84dd8c6f8bf..2b25374cdb0 100644
--- a/assets/js/sidebar-load-width.js
+++ b/assets/js/sidebar-load-width.js
@@ -9,7 +9,7 @@
 
         if (cssStyles) {
             var styleTag = document.createElement("style");
-            styleTag.innerHTML = ".td-resizable-grid .td-main > .row.flex-xl-nowrap {" + cssStyles + "}";
+            styleTag.innerHTML = ".r-grid-container {" + cssStyles + "}";
             document.head.appendChild(styleTag);
         }
     } catch (e) {
diff --git a/assets/scss/_layout-resizers.scss b/assets/scss/_layout-resizers.scss
index 6dd483f04fb..7e747924518 100644
--- a/assets/scss/_layout-resizers.scss
+++ b/assets/scss/_layout-resizers.scss
@@ -63,11 +63,11 @@
     .r-grid-container {
     display: grid;
     grid-template-columns:
-      var(--left-sidebar-width)
-      var(--sidebar-resize-width)
-      1fr
-      var(--sidebar-resize-width)
-      var(--toc-width);
+        var(--left-sidebar-width)
+        var(--sidebar-resize-width)
+        1fr
+        var(--sidebar-resize-width)
+        var(--toc-width);
 
 
     #right-resizer {
@@ -83,9 +83,17 @@
         grid-row: 1;
     }
 
-    .r-main {
-        grid-column: 3;
-        grid-row: 1;
+    &--without-toc {
+        display: grid;
+        grid-template-columns:
+            var(--left-sidebar-width)
+            var(--sidebar-resize-width)
+            1fr;
+
+        #right-resizer,
+        .r-grid-container {
+            display: none;
+        }
     }
   }
 }
\ No newline at end of file