Both the catalog flow ($brandName/$modelId) and the VIN-decode flow
(vehicles/$id) render the same CategoryColumns. It was stuck inside a fixed
visual window: container min-height 320px, each column max-height 420px. With
20+ root categories the user saw an internal scrollbar inside an otherwise
short rectangle even though there was plenty of page room.
Make it flex naturally:
- Outer container: min-h-[24rem] keeps a solid floor for empty/cold state,
max-h-[calc(100dvh-220px)] keeps a 200-leaf catalog from running off the
bottom of the page. Within that band, height tracks the tallest column's
natural content (flex stretch — siblings share the height).
- Inner column panels: drop the 420px max-height. Each column flexes to the
shared height; overflow-y-auto only kicks in when the outer viewport cap
compresses the row.
Net result: small catalogs render a short, tight columns view; large
catalogs grow to fill the available height up to the viewport cap, then
the columns scroll individually. Same component fixes /catalog/.../$modelId,
/vehicles/$id, and the nested /categories/$categoryId drill.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Semih Yesilyurt
6daf59fe8a