na

app/assets/stylesheets/application.css

@@ -553,11 +553,11 @@ main {
     line-height: 1.3;   
     
     align-self: end;
-    /*min-height: 160px;*/
-
+    
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    gap: 0;
 
     transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
 

app/javascript/application.js

@@ -203,13 +203,13 @@ function animateElementsSequentially(index = 0) {
           const relativePercentage = (percentage / maxPercentage) * 100
           const calculatedHeight = (relativePercentage / 100) * containerHeight
 
-          const computedStyle = window.getComputedStyle(bar)
-          const minHeight = parseInt(computedStyle.minHeight) || 0
+          const minHeight = getNaturalHeight(bar)
           
           let finalMinHeight = minHeight
-          if (bar.querySelector('.explanation')) {
-            finalMinHeight = Math.max(minHeight, 160)
-          }
+
+          // if (bar.querySelector('.explanation')) {
+          //   finalMinHeight = Math.max(minHeight, 160)
+          // }
 
           targetHeights[i] = Math.max(calculatedHeight, finalMinHeight)
         })
@@ -541,4 +541,38 @@ function typeWriterConsoleSequential(container, options = {}) {
     
     get isActive() { return isActive }
   }
-}
+}
+
+function getNaturalHeight(el) {
+  // Save original inline styles
+  
+  const prevParent = {
+    display: el.style.display
+  };
+
+  // Apply temporary styles to parent
+  el.style.display = "flex";
+    
+  // Handle hidden children
+  const childPrev = [];
+  for (let child of el.children) {
+    childPrev.push({
+      display: child.style.display
+    });
+
+    child.style.display = "block";     
+  }
+
+  // Measure
+  const height = el.scrollHeight;
+
+  // Restore child styles
+  Array.from(el.children).forEach((child, i) => {
+    Object.assign(child.style, childPrev[i]);
+  });
+
+  // Restore parent styles
+  Object.assign(el.style, prevParent);
+
+  return height;
+}