fix: make code panel scrollable for long algorithm sources

Constrain the panel height chain with min-h-0 and treat the code viewer as the scrollport so long sources (e.g. greedy-vs-dp) can scroll instead of being clipped.

Author: midudev

src/components/CodePanel.astro

@@ -29,9 +29,9 @@ const algorithmCodeHtml = initialAlgorithmId
   data-code-panel-content
   data-locale={locale}
   data-initial-algorithm-id={initialAlgorithmId}
-  class="flex flex-col h-full"
+  class="flex flex-col h-full min-h-0"
 >
-  <div class="flex flex-1 flex-col overflow-hidden">
+  <div class="flex flex-1 flex-col overflow-hidden min-h-0">
     <div
       class="flex items-center gap-1 shrink-0 px-2 md:px-3 py-1.5 border-b border-white/[0.06]"
       role="group"
@@ -73,7 +73,7 @@ const algorithmCodeHtml = initialAlgorithmId
         </div>
       </div>
 
-      <div data-code-variants class="h-full" set:html={algorithmCodeHtml}></div>
+      <div data-code-variants class="h-full min-h-0" set:html={algorithmCodeHtml}></div>
     </div>
 
     <div

src/components/CodePanelShell.astro

@@ -35,7 +35,7 @@ const panelWidth = "420px"
 
 <div
   data-code-panel-shell
-  class="site-code-panel-shell relative shrink-0 flex z-50 md:z-auto"
+  class="site-code-panel-shell relative shrink-0 flex self-stretch min-h-0 z-50 md:z-auto"
   style={`--code-panel-width: ${panelWidth}`}
   data-initial-collapsed={initialCollapsed ? "" : undefined}
   data-collapsed={initialCollapsed ? "" : undefined}
@@ -62,7 +62,7 @@ const panelWidth = "420px"
 
   <aside
     data-code-panel-panel
-    class="site-code-panel-panel bg-black overflow-hidden flex flex-col"
+    class="site-code-panel-panel bg-black overflow-hidden flex flex-col min-h-0 h-full"
     style={`width: ${initialCollapsed ? "0px" : panelWidth}`}
     aria-label={t.codePanelAriaLabel}
     aria-hidden={initialCollapsed ? "true" : "false"}
@@ -92,7 +92,7 @@ const panelWidth = "420px"
       </button>
     </div>
 
-    <div class="w-full h-full flex flex-col min-h-0 relative">
+    <div class="w-full flex-1 flex flex-col min-h-0 relative">
       <CodePanel
         locale={locale}
         initialAlgorithmId={initialAlgorithmId}

src/styles/global.css

@@ -236,17 +236,48 @@
   }
 }
 
+/* Keep the scroll chain constrained so long sources can overflow-auto. */
+[data-code-variants],
+[data-algorithm-code] {
+  height: 100%;
+  min-height: 0;
+}
+
+[data-algorithm-code] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .code-viewer {
   color: var(--foreground);
   background: var(--surface);
   tab-size: 2;
-  scrollbar-width: none;
+  /* pre is the scrollport — height must not grow with content */
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 100%;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent;
   opacity: 1;
   transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .code-viewer::-webkit-scrollbar {
-  display: none;
+  width: 8px;
+  height: 8px;
+}
+
+.code-viewer::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--foreground) 18%, transparent);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.code-viewer::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 .code-viewer.is-loading {