fix: Handle large # of tabs via scroll

Author: lamATnginx

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;

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