mercadodevida/work/artifacts/F-124/implementer.md

F-124 — Layout 2 columnas para Categorías + Atributos

Cambios

apps/admin/src/features/products/components/ProductEditor.tsx

• Los bloques <div> de Categorías y Atributos (que antes eran siblings apilados verticalmente, ocupando todo el ancho) ahora se envuelven en un contenedor grid grid-cols-1 lg:grid-cols-2 gap-6:
  • Móvil (grid-cols-1): apilados verticalmente, mismo comportamiento que antes
  • Desktop (lg:grid-cols-2 desde 1024px): lado a lado

+ <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div>
      <div className="flex items-center justify-between mb-3">
        <label className="text-sm font-semibold text-gray-900">Categorías</label>
      </div>
      <div className="border border-gray-200 rounded-xl p-3 space-y-2 max-h-52 overflow-y-auto">
        {categories.map(...)}
      </div>
    </div>
    <div>
      <div className="flex items-center justify-between mb-3">
        <label className="text-sm font-semibold text-gray-900">Atributos</label>
        <span className="text-xs text-gray-400">{attributes.length} / 16</span>
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
        {Object.entries(ATTRIBUTE_LABELS).map(...)}
      </div>
    </div>
+ </div>

Verificación

• cd apps/admin && npx tsc --noEmit → exit 0.
• cd apps/admin && NEXT_PUBLIC_API_URL=http://192.168.18.93:3000 npm run build → exit 0.

Notas

• Sin cambios en backend, estado ni handlers.
• Solo presentación: el operador ve las dos secciones lado a lado en pantallas anchas, sigue apilado en móvil.
• Operador reinicia admin (./scripts/monolith.sh prod restart) para desplegar.