From 73e09e02bdeca1af552d5a6360c0a5d82a2f9412 Mon Sep 17 00:00:00 2001
From: titusfortner <titusfortner@gmail.com>
Date: Sun, 4 Sep 2022 23:33:35 -0500
Subject: [PATCH] automatically set the height of the tabs across the languages

---
 .../layouts/shortcodes/tabpane.html           |  4 +--
 website_and_docs/static/js/tabpane-persist.js | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/website_and_docs/layouts/shortcodes/tabpane.html b/website_and_docs/layouts/shortcodes/tabpane.html
index c322cb10fb21..0c07af37b688 100644
--- a/website_and_docs/layouts/shortcodes/tabpane.html
+++ b/website_and_docs/layouts/shortcodes/tabpane.html
@@ -30,7 +30,7 @@
 <!-- Scratchpad gets populated through call to .Inner -->
 {{- .Inner -}}
 
-<ul class="nav nav-tabs" id="tabs-{{- $.Ordinal -}}" role="tablist">
+<ul class="nav nav-tabs{{ if $persistLang }} persist{{ end }}" id="tabs-{{- $.Ordinal -}}" role="tablist">
   {{- range $index, $element := $.Scratch.Get "tabs" -}}
 
     {{- $lang := $langPane -}}
@@ -75,7 +75,7 @@
 {{ $activeSet = false }}
 
 <!-- Inner content -->
-<div class="tab-content" id="tabs-{{- $.Ordinal -}}-content">
+<div class="tab-content{{ if $persistLang }} persist{{ end }}" id="tabs-{{- $.Ordinal -}}-content">
   {{- range $index, $element := $.Scratch.Get "tabs" -}}
 
     {{- $lang := $langPane -}}
diff --git a/website_and_docs/static/js/tabpane-persist.js b/website_and_docs/static/js/tabpane-persist.js
index 0adf31cedd92..910768d38765 100644
--- a/website_and_docs/static/js/tabpane-persist.js
+++ b/website_and_docs/static/js/tabpane-persist.js
@@ -1,4 +1,30 @@
 <!-- Upstream docsy commit — ecd4be87ea48e8e94684e32c925049e9bdf7f127-->
+var tabContents = document.querySelectorAll('.tab-content.persist');
+if (tabContents.length > 1) {
+    const persistTab = document.querySelector('ul.persist').querySelectorAll('.nav-link');
+    var heightMap = {};
+
+    // select each persist tab and store calculated heights
+    persistTab.forEach((langTab) => {
+        langTab.click();
+        tabContents.forEach((tabContent) => {
+            heightMap[tabContent.id] ||= [];
+            heightMap[tabContent.id].push(tabContent.clientHeight);
+        })
+        // everything ends up active unless classes removed
+        document.querySelectorAll('.active.show').forEach((activeTab) => {
+            activeTab.classList.remove('active');
+            activeTab.classList.remove('show');
+        })
+    })
+    // need to make something active/shown again
+    persistTab[0].click();
+
+    tabContents.forEach((tabContent) => {
+        tabContent.style.height = Math.max.apply(Math, heightMap[tabContent.id]).toString() + 'px';
+    })
+}
+
 if (typeof Storage !== 'undefined') {
     let activeLanguage = localStorage.getItem('active_language');