From b4a13485ff212261434bf1323d841266c3eb48e5 Mon Sep 17 00:00:00 2001
From: James Cobb <jcobb@redhat.com>
Date: Thu, 12 Oct 2023 16:31:02 -0500
Subject: [PATCH 1/2] refactor TOC to be sticky

---
 _layouts/guides.html     | 12 +++++-------
 _sass/layouts/guide.scss | 13 ++++++++-----
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/_layouts/guides.html b/_layouts/guides.html
index 0722148905..a75a0dfd7f 100644
--- a/_layouts/guides.html
+++ b/_layouts/guides.html
@@ -48,13 +48,11 @@
 </section>
 
 <div class="grid-wrapper guide">
-  <div class="grid__item width-12-12 width-12-12-mobile">
-    <h1 class="text-caps">{{page.title}} {{page.docversion}}</h1>
-  </div>
-  <div class="width-12-12">
+  <div class="grid__item width-4-12 width-12-12-m">
     <div class="hide-mobile toc">{{ page.document | tocify_asciidoc: 2 }}</div>
-    <div>
-      {{ content }}
-    </div>
+  </div>
+  <div class="grid__item width-8-12 width-12-12-m">
+    <h1 class="text-caps">{{page.title}} {{page.docversion}}</h1>
+    {{ content }}
   </div>
 </div>
diff --git a/_sass/layouts/guide.scss b/_sass/layouts/guide.scss
index 2509a41893..7b2e3d0d71 100644
--- a/_sass/layouts/guide.scss
+++ b/_sass/layouts/guide.scss
@@ -21,13 +21,16 @@ body.guides-configuration-reference div.guides-configuration-reference {
   .line-through{ color: $dark-blue-alt; text-decoration:line-through}
 
   .toc {
-    float: right;
-    width: 350px;
-    padding-right: 20px;
-    margin-left: 20px;
-    margin-bottom: 20px;
+    position: sticky;
+    top: 1rem;
+    padding: 1rem 1.5rem 1rem 0rem;
+    margin: 1rem;
     background-color: $grey-0;
     word-wrap: break-word;
+    max-height: 90vh;
+    overflow-y: auto;
+
+
     ul {
       list-style: none;
     }

From 744478fcb490b2819cb8dd47beee9c7a50b1df79 Mon Sep 17 00:00:00 2001
From: James Cobb <jcobb@redhat.com>
Date: Fri, 13 Oct 2023 10:13:04 -0500
Subject: [PATCH 2/2] move TOC to right

---
 _layouts/guides.html     | 6 +++---
 _sass/layouts/guide.scss | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/_layouts/guides.html b/_layouts/guides.html
index a75a0dfd7f..2f5c373aaa 100644
--- a/_layouts/guides.html
+++ b/_layouts/guides.html
@@ -48,11 +48,11 @@
 </section>
 
 <div class="grid-wrapper guide">
-  <div class="grid__item width-4-12 width-12-12-m">
-    <div class="hide-mobile toc">{{ page.document | tocify_asciidoc: 2 }}</div>
-  </div>
   <div class="grid__item width-8-12 width-12-12-m">
     <h1 class="text-caps">{{page.title}} {{page.docversion}}</h1>
     {{ content }}
   </div>
+  <div class="grid__item width-4-12 width-12-12-m tocwrapper">
+    <div class="hide-mobile toc">{{ page.document | tocify_asciidoc: 2 }}</div>
+  </div>
 </div>
diff --git a/_sass/layouts/guide.scss b/_sass/layouts/guide.scss
index 7b2e3d0d71..fccf105a71 100644
--- a/_sass/layouts/guide.scss
+++ b/_sass/layouts/guide.scss
@@ -20,6 +20,10 @@ body.guides-configuration-reference div.guides-configuration-reference {
   }
   .line-through{ color: $dark-blue-alt; text-decoration:line-through}
 
+  .tocwrapper {
+  display: flex;
+  }
+  
   .toc {
     position: sticky;
     top: 1rem;
@@ -29,6 +33,8 @@ body.guides-configuration-reference div.guides-configuration-reference {
     word-wrap: break-word;
     max-height: 90vh;
     overflow-y: auto;
+    width: 100%;
+    align-self: start;
 
 
     ul {