From ec6438bb7c65110d103eeacb49d9d62c8c3ebafc Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Tue, 11 Mar 2025 17:12:31 -0700
Subject: [PATCH] fix: Handle large # of tabs via scroll

---
 assets/css/v2/style.css      | 24 ++++++++++++++++++------
 layouts/shortcodes/tabs.html | 22 ++++++++++++----------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 30c96a25..81a0c5d0 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -870,17 +870,29 @@ blockquote p:last-child {
 }
 
 /* Tabs */
-.nav-tabs {
-  list-style: none;
-  display: flex;
-  justify-content: start;
-  border-bottom: 1px solid black;
+
+.tabs-container {
   position: relative;
   z-index: -1;
+  border-bottom: 1px solid black;
+  white-space: nowrap;
 
   /* Lines extend 1rem into gutter on both sides */
   width: calc(100% + 2rem);
   margin-left: -1rem;
+}
+
+.nav-tabs {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  height: calc(100% + 1px);
+  scrollbar-width: none;
+
+  list-style: none;
+  display: flex;
+  justify-content: start;
+  margin: 0 1rem;
+  padding: 0;
 
   > :not(:last-child) {
     border-right: none;
@@ -917,7 +929,7 @@ blockquote p:last-child {
     position: absolute;
     display: block;
     border-bottom: 1px solid white;
-    bottom: -1px; /* Moves the line down 1px (aka the thickness of the border) */
+    bottom: 0;
     left: 0;
     width: 100%;
     z-index: 9999;
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index aeb9582b..093f5dbf 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -2,16 +2,18 @@
 {{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}
-<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
-	{{- range $i, $e := $tabs -}}
-	  {{- $id := printf "%s-%d" $tab_set_id $i -}}
-	  {{- if (eq $i 0) -}}
-		<li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</a></li>
-	  {{ else }}
-		<li class="nav-item"><a data-toggle="tab" class="nav-link" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}">{{- trim .name " " -}}</a></li>
-	  {{- end -}}
-{{- end -}}
-</ul>
+<div class="tabs-container">
+	<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
+		{{- range $i, $e := $tabs -}}
+		{{- $id := printf "%s-%d" $tab_set_id $i -}}
+		{{- if (eq $i 0) -}}
+			<li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</a></li>
+		{{ else }}
+			<li class="nav-item"><a data-toggle="tab" class="nav-link" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}">{{- trim .name " " -}}</a></li>
+		{{- end -}}
+	{{- end -}}
+	</ul>
+</div>
 <div class="tab-content" id="{{ $tab_set_id }}">
 {{- range $i, $e := $tabs -}}
 {{- $id := printf "%s-%d" $tab_set_id $i -}}