From 5ce9c07829a786fa4b7ea6cab276711a767d6059 Mon Sep 17 00:00:00 2001
From: Cristian Felipe Cruz Buitron <cristiancruz0529@gmail.com>
Date: Sun, 20 Sep 2026 18:57:54 +0000
Subject: [PATCH] fix(ecommerce): ocultar texto de Departamentos en mobile, 3
 shrink-0 desbordaban 320px

---
 workloads/ecommerce/components/layout/navbar.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/workloads/ecommerce/components/layout/navbar.tsx b/workloads/ecommerce/components/layout/navbar.tsx
index 98079fb..20c8546 100644
--- a/workloads/ecommerce/components/layout/navbar.tsx
+++ b/workloads/ecommerce/components/layout/navbar.tsx
@@ -261,10 +261,18 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
         onClick={() => setOpen((value) => !value)}
         aria-expanded={open}
         aria-haspopup="true"
+        aria-label="Departamentos"
         className={`flex items-center gap-1.5 ${pillClass(open)}`}
       >
         <LayoutGrid className="size-4" />
-        Departamentos
+        {/* Texto oculto en mobile: los 3 items de esta fila (menu, este
+            boton, "Todo") tienen shrink-0 -- ninguno se achica, asi que si
+            los tres no entran, desbordan la pagina entera (confirmado en
+            vivo 2026-09-20 contra 320px real: 14px de overflow horizontal
+            con el texto visible). No es un caso de min-w-0 faltante (ese
+            fix asume que el item PUEDE achicarse) -- ocultar la palabra
+            mas larga de la fila es lo que de verdad libera espacio. */}
+        <span className="hidden sm:inline">Departamentos</span>
         <ChevronDown className={`size-3.5 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
       </button>