From e9a053b9099e5e585530d92f0f310884af52bb6e Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 14 Jan 2025 11:20:33 +0000
Subject: [PATCH] Use rem values from mockup Hide toc with theme switcher

Add x overflow for code blocks (code blocks will)
scroll horizontally instead of overflowing outside
it's block
---
 assets/css/v2/style.css     | 9 +++++++--
 assets/js/theme-switcher.js | 2 +-
 layouts/_default/docs.html  | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 5ec6894d..c445c123 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -77,8 +77,8 @@ nav {
 
 /* content */
 main {
-    max-width: 40rem;
-    min-width: 30rem;
+    max-width: 50rem;
+    min-width: 40rem;
     margin: 2rem 2rem;
 }
 
@@ -164,6 +164,11 @@ code {
     font-family: 'JetBrains Mono', monospace;
 }
 
+pre.chroma {
+    overflow-x: auto;
+    box-sizing: border-box;
+}
+
 /* FILTHY HACKS BEGIN */
 
 /* Override logo with black text version */
diff --git a/assets/js/theme-switcher.js b/assets/js/theme-switcher.js
index bc2e8364..8f320fba 100644
--- a/assets/js/theme-switcher.js
+++ b/assets/js/theme-switcher.js
@@ -29,7 +29,7 @@ function useNewTheme(useNewTheme) {
   });
 
   // swap out v1 and v2 elements
-  const v1ElementIds = ["sidebar"]
+  const v1ElementIds = ["sidebar", "toc"]
 
   v1ElementIds.forEach((elementId) => {
     document.getElementById(elementId).style.display = useNewTheme ? "none" : "";
diff --git a/layouts/_default/docs.html b/layouts/_default/docs.html
index 03c3dd08..2a6e90f7 100644
--- a/layouts/_default/docs.html
+++ b/layouts/_default/docs.html
@@ -37,7 +37,7 @@ <h1>{{ .Title }}</h1>
   </main>
   {{ if and (gt .WordCount 200 ) (.Params.toc) }}
     {{ if (add  (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
-      <div class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
+      <div id="toc" class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
       {{ partial "toc.html" . }}
       </div>
     {{ end }}