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 {
@@ -901,16 +900,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 {
@@ -922,7 +929,7 @@ blockquote.side-callout {
   list-style: none;
   display: flex;
   justify-content: start;
-  margin: 0 1rem;
+  margin: 0;
   padding: 0;
 
   > :not(:last-child) {
@@ -932,9 +939,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;
@@ -949,22 +955,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) {
@@ -973,7 +969,9 @@ blockquote.side-callout {
 }
 
 .tab-content {
-  position: relative;
+  border-bottom: 1px solid black;
+  width: calc(100% + (2 * var(--overflow-gutter-extension)));
+  margin-left: calc(-1 * var(--overflow-gutter-extension));
 
   .tab-pane {
     display: none;
@@ -987,16 +985,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;
@@ -1010,7 +998,7 @@ blockquote.side-callout {
 }
 
 .code-block {
-  grid-column: 1;
+  position: static;
 }
 
 .code-block .code-header:not(:has(.code-type)) {
@@ -1039,7 +1027,6 @@ 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),
@@ -1056,7 +1043,6 @@ li .code-block {
   align-items: center;
   border: 1px solid #cccccc;
   overflow-x: scroll;
-  width: calc(100% + var(--overflow-gutter-extension));
 }
 
 .code-header {
@@ -1072,9 +1058,8 @@ li .code-block {
   text-transform: uppercase;
   border: 1px solid #cccccc;
   border-bottom: 1px solid white;
-  padding: .25rem 1rem; /* Padding for button content */
-  font-size: 12px; /* Font size */
-  z-index: 9999;
+  padding: .25rem 1rem;
+  font-size: 12px;
   margin-bottom: -1px;
 }
 

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 -}}