fix: Tabs not working due to z-index

Author: lamATnginx

assets/css/v2/style.css

@@ -502,7 +502,6 @@ atomic-search-layout atomic-layout-section[section="search"] {
   background-color: white;
   border: black 1px solid;
   box-shadow: 3px 3px 0px var(--color-shadow);
-  z-index: 9999;
 }
 
 .product-selector p {
@@ -906,16 +905,24 @@ blockquote.side-callout {
 }
 
 /* Tabs */
-
 .tabs-container {
-  position: relative;
-  z-index: -1;
-  border-bottom: 1px solid black;
+  /* border-bottom: 1px solid black; */
   white-space: nowrap;
 
   /* Lines extend 1rem into gutter on both sides */
   width: calc(100% + 2rem);
   margin-left: -1rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+}
+
+.tabs-line {
+  display: block;
+  background-color: white;
+  border-bottom: 1px solid black;
+  width: 2rem;
 }
 
 .nav-tabs {
@@ -927,7 +934,7 @@ blockquote.side-callout {
   list-style: none;
   display: flex;
   justify-content: start;
-  margin: 0 1rem;
+  margin: 0;
   padding: 0;
 
   > :not(:last-child) {
@@ -937,9 +944,8 @@ blockquote.side-callout {
 
 .nav-item {
   border: 1px solid var(--color-tabs-divider);
-  border-bottom: none;
+  border-bottom: 1px solid black;
   padding: 10px;
-  position: relative;
 
   a {
     text-decoration: none;
@@ -954,22 +960,12 @@ blockquote.side-callout {
   /* Change the border colors of li that is has a child with a class "active" */
   border-top: 1px solid black;
   border-left: 1px solid black;
+  border-bottom: none;
 
   /* Change the border of next child */
   + li {
     border-left: 1px solid black;
   }
-
-  &::after {
-    content: "";
-    position: absolute;
-    display: block;
-    border-bottom: 1px solid white;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 9999;
-  }
 }
 
 .nav-item:last-child:has(.active) {
@@ -978,7 +974,8 @@ blockquote.side-callout {
 }
 
 .tab-content {
-  position: relative;
+  border-bottom: 1px solid black;
+  margin-left: calc(-1 * var(--overflow-gutter-extension));
 
   .tab-pane {
     display: none;
@@ -992,16 +989,6 @@ blockquote.side-callout {
   }
 }
 
-.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;
@@ -1014,11 +1001,8 @@ blockquote.side-callout {
   }
 }
 
-.code-container {
-  grid-column: 1;
-  display: flex;
-  flex-direction: row;
-  position: relative;
+.code-block {
+  position: static;
 }
 
 .code-block .code-header:not(:has(.code-type)) {
@@ -1036,13 +1020,22 @@ li .code-block {
   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;
   border: 1px solid #cccccc;
+  overflow-x: scroll;
 }
 
 .code-header {
@@ -1056,12 +1049,11 @@ li .code-block {
 
 .code-type {
   text-transform: uppercase;
-  padding: .25rem 0.25rem; /* Padding for button content */
-  font-size: 12px; /* Font size */
-  z-index: 9999;
-  position: absolute;
-  background-color: white;
-  margin: -12px 0 0 1rem;
+  border: 1px solid #cccccc;
+  border-bottom: 1px solid white;
+  padding: .25rem 1rem;
+  font-size: 12px;
+  margin-bottom: -1px;
 }
 
 .code-container:hover {

layouts/shortcodes/tabs.html

@@ -3,6 +3,7 @@
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}
 <div class="tabs-container">
+	<span class="tabs-line"></span>
 	<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
 		{{- range $i, $e := $tabs -}}
 		{{- $id := printf "%s-%d" $tab_set_id $i -}}
@@ -13,6 +14,7 @@
 		{{- end -}}
 	{{- end -}}
 	</ul>
+	<span class="tabs-line"></span>
 </div>
 <div class="tab-content" id="{{ $tab_set_id }}">
 {{- range $i, $e := $tabs -}}