From f63bc9e5f5325a8132d087f128377853ff1e9e2c Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Tue, 18 Mar 2025 15:04:06 -0700
Subject: [PATCH 1/2] Polish: Codeblocks overflow

---
 assets/css/v2/style.css | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 5ab9fbb..1d3aa3a 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -966,11 +966,7 @@ blockquote.side-callout {
 }
 
 .tab-content {
-  border-bottom: 1px solid black;
-
-  /* Lines extend 1rem into gutter on both sides */
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
+  position: relative;
 
   .tab-pane {
     display: none;
@@ -979,15 +975,21 @@ blockquote.side-callout {
     margin-left: 1rem;
   }
 
-  .tab-pane * {
-    margin-left: 0;
-  }
-
   .active {
     display: block !important;
   }
 }
 
+.tab-content::after {
+  /* Bottom Horizontal Line for Tabs */
+  content: "";
+  position: absolute;
+  border-bottom: 1px solid black;
+  left: calc(-1 * var(--overflow-gutter-extension));
+  bottom: 0;
+  width: calc(100% + (2 * var(--overflow-gutter-extension)));
+}
+
 /* Codeblocks */
 .highlight {
   padding: 0 1rem 0 1rem;
@@ -1004,6 +1006,16 @@ blockquote.side-callout {
   grid-column: 1;
 }
 
+.code-block .code-header:not(:has(.code-type)) {
+  /* Remove margin for codeblocks without a type */
+  margin-top: -1.5rem;
+}
+
+li .code-block {
+  /* For indented code blocks, move 1rem back to align code with text from heading */
+  margin-left: -1rem;
+}
+
 .icon-code-copy {
   background-color: #f2f2f2;
   border: none;
@@ -1016,11 +1028,12 @@ blockquote.side-callout {
 
 .highlight-v2 {
   padding: 0 1rem 0 0;
-  margin: 0 -1rem 1rem -1rem;
+  margin: 0 0 1rem 0;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   overflow-x: scroll;
   scrollbar-width: none;
+  width: calc(100% + var(--overflow-gutter-extension));
 }
 
 .highlight-v2.single-line {
@@ -1029,7 +1042,7 @@ blockquote.side-callout {
   padding: 0 1rem 0 0;
   border: 1px solid #cccccc;
   overflow-x: scroll;
-  width: calc(100% + (2 * var(--overflow-gutter-extension)));
+  width: calc(100% + var(--overflow-gutter-extension));
 }
 
 .code-header {

From 29b06476a0a9934855a986ffe4e48c4f8653697b Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Wed, 19 Mar 2025 09:29:24 -0700
Subject: [PATCH 2/2] Polish: Add shadow to codeblock + fix images

---
 assets/css/v2/style.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 1d3aa3a..6123e7f 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1027,19 +1027,26 @@ li .code-block {
 }
 
 .highlight-v2 {
-  padding: 0 1rem 0 0;
   margin: 0 0 1rem 0;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   overflow-x: scroll;
   scrollbar-width: none;
   width: calc(100% + var(--overflow-gutter-extension));
+
+  background-image: linear-gradient(to right, white, white),
+    linear-gradient(to right, white, white),
+    linear-gradient(to right, rgba(165, 165, 165, 0.25), rgba(255, 255, 255, 0)),
+    linear-gradient(to left, rgba(165, 165, 165, 0.25), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-size: 12px 100%, 12px 100%, 10px 100%, 10px 100%;
+  background-attachment: local, local, scroll, scroll;
 }
 
 .highlight-v2.single-line {
   display: flex;
   align-items: center;
-  padding: 0 1rem 0 0;
   border: 1px solid #cccccc;
   overflow-x: scroll;
   width: calc(100% + var(--overflow-gutter-extension));
@@ -1094,9 +1101,11 @@ figure {
   margin: 0;
 }
 
+img,
 .figure-bitmap {
   margin-bottom: 0.625rem;
   display: inline-block;
+  width: 100%;
   max-width: 100%;
 }