From b83722e9c599d51c816c0e4dbfabe7a617b01d01 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Sun, 6 Sep 2026 21:04:04 +0000
Subject: [PATCH] fix(catalog): scroll propio en el sidebar de filtros
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El <aside> de Filtros es sticky pero sin altura máxima ni overflow
propio -- con 30+ categorías más marca/edad/precio, el panel se pasa
del viewport y queda inalcanzable (reportado en vivo: había que bajar
el zoom del navegador para ver "Marca"/"Edad"/"Precio").

overflow-y-auto + max-h acotado al viewport (solo en lg, que es donde
aplica sticky) le da scroll propio al panel sin depender del scroll de
la página.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01THZFwPzrwv6VAbuwmaf5vR
---
 workloads/ecommerce/components/catalog/catalog-client.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/workloads/ecommerce/components/catalog/catalog-client.tsx b/workloads/ecommerce/components/catalog/catalog-client.tsx
index 993c76c..847193b 100644
--- a/workloads/ecommerce/components/catalog/catalog-client.tsx
+++ b/workloads/ecommerce/components/catalog/catalog-client.tsx
@@ -352,7 +352,11 @@ export function CatalogClient({
       </div>
 
       <div className="grid gap-8 lg:grid-cols-[260px_1fr]">
-        <aside className="h-fit space-y-6 rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-marino/5 lg:sticky lg:top-44">
+        {/* overflow-y-auto + max-h propio en lg: sticky no le da scroll
+            propio al contenido, y con 30+ categorias mas marca/edad/precio
+            el panel se pasa del viewport sin forma de llegar al resto salvo
+            bajando el zoom del navegador (reportado en vivo). */}
+        <aside className="h-fit space-y-6 overflow-y-auto rounded-lg border border-slate-100 bg-white p-6 shadow-lg shadow-ari-marino/5 lg:sticky lg:top-44 lg:max-h-[calc(100vh-13rem)]">
           <div className="flex items-center justify-between">
             <strong className="flex items-center gap-2 text-lg font-black">
               <SlidersHorizontal className="size-5 text-ari-coral-claro" />