style: stretch homepage example panel

Author: artem-korolev

website-docusaurus/src/pages/index.module.css

@@ -137,6 +137,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  min-height: 0;
   padding: 0.7rem;
   background: var(--home-panel-soft);
 }
@@ -177,7 +178,11 @@
 }
 
 .examplePanel {
+  display: flex;
+  flex-direction: column;
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   background: var(--home-terminal);
 }
 
@@ -213,8 +218,8 @@
 }
 
 .examplePanel pre {
-  min-height: 268px;
-  max-height: min(52vh, 420px);
+  flex: 1 1 auto;
+  min-height: 0;
   margin: 0;
   padding: clamp(1rem, 2vw, 1.35rem);
   overflow: auto;

website/src/pages/index.astro

@@ -524,6 +524,7 @@ const examples = [
     display: flex;
     flex-direction: column;
     gap: 8px;
+    min-height: 0;
     padding: 12px;
     background: rgba(248, 250, 252, 0.9);
   }
@@ -562,10 +563,24 @@ const examples = [
   }
 
   .example-panels {
+    display: flex;
     min-width: 0;
+    min-height: 0;
+    overflow: hidden;
     background: #111827;
   }
 
+  .example-panel:not([hidden]) {
+    display: flex;
+    width: 100%;
+    min-height: 0;
+    flex-direction: column;
+  }
+
+  .example-panel[hidden] {
+    display: none;
+  }
+
   .example-panel-bar {
     display: flex;
     align-items: center;
@@ -598,8 +613,8 @@ const examples = [
   }
 
   .example-panel pre {
-    min-height: 268px;
-    max-height: min(52vh, 420px);
+    flex: 1 1 auto;
+    min-height: 0;
     margin: 0;
     padding: clamp(18px, 2.4vw, 28px);
     overflow: auto;