make the height of all tabs in the pane the same

Author: titusfortner

website_and_docs/static/js/tabpane-persist.js

@@ -40,6 +40,23 @@ function getActiveTabFromURL() {
   return urlParams.get('tab').toLowerCase();
 }
 
+function adjustTabContentHeights() {
+  const tabPanes = document.querySelectorAll('.tab-content');
+
+  tabPanes.forEach(pane => {
+    let maxHeight = 0;
+    const tabBody = pane.querySelectorAll('.tab-body');
+
+    tabBody.forEach(tabContent => {
+      tabContent.style.display = 'block'; // Temporarily show the tab content
+      maxHeight = Math.max(maxHeight, tabContent.clientHeight);
+      tabContent.style.display = ''; // Reset the display property
+    });
+
+    pane.style.height = maxHeight + 'px';
+  });
+}
+
 // Retrieve, increment, and store tab-select event count, then returns it.
 function tdGetTabSelectEventCountAndInc() {
   // @requires: tdSupportsLocalStorage();
@@ -98,6 +115,9 @@ function tdGetAndActivatePersistedTabs(tabs) {
     tdActivateTabsWithKey(key);
   });
 
+  // Adjust tab content heights
+  adjustTabContentHeights();
+
   return key_ageList;
 }