From 7c8ff380899ff3d2e112084fface49786536b7a9 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 2 Oct 2025 08:57:43 -0700
Subject: [PATCH 1/3] Codeblock: Fix types not overlapping in callout

---
 assets/css/v2/style.css       | 4 ----
 layouts/partials/callout.html | 7 +------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index a9b0a249..e8385565 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -2019,10 +2019,6 @@ blockquote {
     }
   }
 
-  .callout-content {
-    margin: 0;
-  }
-
   /* To help them align with text, side callouts should not have top margin*/
   &[data-grid="last-third"] {
     --margin-callout: 0 0 0 1rem;
diff --git a/layouts/partials/callout.html b/layouts/partials/callout.html
index dff18606..aced821d 100644
--- a/layouts/partials/callout.html
+++ b/layouts/partials/callout.html
@@ -52,12 +52,7 @@
 
 <blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}" data-grid="{{ $dataGrid }}">
   <div class="callout-content">
-    {{- with $icon -}}
-      <i class="{{ . }}"></i>
-    {{- end -}}
-    <div class="callout-content">
-    {{ .content | markdownify }}
-    </div>
+  {{ .content | markdownify }}
   </div>
 </blockquote>
 

From 468de9218b3b5984f41fa9a42db397788cd8b7fa Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 2 Oct 2025 15:51:52 -0700
Subject: [PATCH 2/3] Codeblock: Handle zooming for firefox + chrome

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

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index e8385565..dd960fc1 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -2311,12 +2311,12 @@ a:has(code:not(pre code)) {
     text-transform: uppercase;
     padding: 0.15rem 0.5rem;
     font-size: 0.75rem;
-    z-index: 2;
-    margin: 0 0 -1px 0;
+    box-sizing: border-box;
   }
 
   .code-container {
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+    margin-block-start: -1px;
 
     &:hover {
       .code-copy-button {
@@ -2351,6 +2351,7 @@ a:has(code:not(pre code)) {
 
     .code-content {
       border: 1px solid oklch(var(--color-codeblock-border));
+      box-sizing: border-box;
       overflow-x: scroll;
       scrollbar-width: none;
       line-height: 150%;

From 36ff481dd4307e757c39d0914139d78119da95a8 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Mon, 6 Oct 2025 13:49:51 -0700
Subject: [PATCH 3/3] Codeblock: Refactored codeblock to handle all cases

---
 assets/css/v2/style.css                       | 37 ++++++++++++++-----
 .../_default/_markup/render-codeblock.html    |  2 +-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index dd960fc1..abdd89ad 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -2292,6 +2292,8 @@ a:has(code:not(pre code)) {
 .code-block {
   position: relative;
   margin: var(--margin-codeblock); /* Expand into the gutter */
+  display: flex;
+  flex-direction: column;
 
   tr::after {
     display: none;
@@ -2303,20 +2305,38 @@ a:has(code:not(pre code)) {
   }
 
   .code-type {
-    display: inline-block;
-    height: 1.5rem;
-    border-top: 1px solid oklch(var(--color-codeblock-border));
-    border-left: 1px solid oklch(var(--color-codeblock-border));
-    border-right: 1px solid oklch(var(--color-codeblock-border));
+    position: relative;
+    border: none;
     text-transform: uppercase;
-    padding: 0.15rem 0.5rem;
     font-size: 0.75rem;
-    box-sizing: border-box;
+    display: flex;
+
+    &::after {
+      content: "";
+      display: block;
+      flex: 1;
+      height: auto;
+      border-bottom: 1px solid oklch(var(--color-codeblock-border));
+    }
+
+    .title {
+      display: inline-block;
+      padding: 0.15rem 0.5rem;
+      border-top: 1px solid oklch(var(--color-codeblock-border));
+      border-left: 1px solid oklch(var(--color-codeblock-border));
+      border-right: 1px solid oklch(var(--color-codeblock-border));
+      border-bottom: none;
+    }
+
+    /* Hide the top border only if code-type exists in code-block */
+    & + .code-container {
+      border-top: none;
+    }
   }
 
   .code-container {
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    margin-block-start: -1px;
+    border: 1px solid oklch(var(--color-codeblock-border));
 
     &:hover {
       .code-copy-button {
@@ -2350,7 +2370,6 @@ a:has(code:not(pre code)) {
     }
 
     .code-content {
-      border: 1px solid oklch(var(--color-codeblock-border));
       box-sizing: border-box;
       overflow-x: scroll;
       scrollbar-width: none;
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index 52290f37..b75e16ac 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -15,7 +15,7 @@
 {{- else -}}
 <div class="code-block">
     {{- if and (ne .Type "") (ne .Type "none") -}}
-        <span class="code-type chroma">{{ .Type }}</span>
+        <figcaption class="code-type"><span class="title chroma">{{ .Type }}</span></figcaption>
     {{- end -}}
     <div class="code-container chroma">
         <button onclick="copyToClipBoard(this, {{ $codeBlockId }})" class="code-copy-button multi-line" type="button">Copy</button>