41 lines
1.6 KiB
Markdown
41 lines
1.6 KiB
Markdown
# 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
|
|
|
|
```diff
|
|
+ <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. |