fix(ecommerce): ocultar texto de Departamentos en mobile, 3 shrink-0 desbordaban 320px

This commit is contained in:
devops committed 2026-09-20 18:57:54 +00:00
1 parent 428ad83e5b
commit 5ce9c07829
1 file changed
+9 -1
@@ -261,10 +261,18 @@ function DepartmentsMegaMenu({ tree, isActive }: { tree: CategoryNode[]; isActiv
onClick={() => setOpen((value) => !value)} onClick={() => setOpen((value) => !value)}
aria-expanded={open} aria-expanded={open}
aria-haspopup="true" aria-haspopup="true"
aria-label="Departamentos"
className={`flex items-center gap-1.5 ${pillClass(open)}`} className={`flex items-center gap-1.5 ${pillClass(open)}`}
> >
<LayoutGrid className="size-4" /> <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" : ""}`} /> <ChevronDown className={`size-3.5 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
</button> </button>