apps/web/src/components/categories/category-columns.tsx

@@ -109,8 +109,11 @@ export function CategoryColumns({
   return (
     <div
       ref={scrollRef}
-      className="flex overflow-x-auto border rounded-md"
-      style={{ minHeight: 320 }}
+      // Dynamic height — the outer container stretches to the tallest column's
+      // natural content (flex children share height), capped at viewport - chrome
+      // so a 200-leaf catalog can't overflow the page. min-h keeps an empty/cold
+      // state from collapsing to nothing.
+      className="flex overflow-x-auto rounded-md border min-h-[24rem] max-h-[calc(100dvh-220px)]"
     >
       {columns.map((col, colIdx) => (
         <ColumnPanel
@@ -212,8 +215,10 @@ function ColumnPanel({
 
   return (
     <div
+      // No fixed maxHeight — each column flexes to the tallest column's height
+      // (default flex stretch), and overflow-y-auto only kicks in once the outer
+      // viewport-based cap on the parent compresses the row.
       className={cn("w-[220px] shrink-0 overflow-y-auto", !isLast && "border-r")}
-      style={{ maxHeight: 420 }}
     >
       {categories.map((category) => {
         const isSelected = selectedId === category.id;