19 lines
1.1 KiB
Markdown
19 lines
1.1 KiB
Markdown
# Architect — F-053
|
|
|
|
## Diagnóstico
|
|
En `apps/admin/src/app/(dashboard)/categories/page.tsx` (línea 245), el grid 2 columnas tiene:
|
|
- Columna 1: `<label>` + `<select>` + `<p>` helper → altura mayor (label + select + texto).
|
|
- Columna 2: `<div className="flex items-end">` con un label-checkbox dentro.
|
|
|
|
El `items-end` hace que el checkbox se alinee con el borde **inferior** de la columna 1, que es más alta por el `<p>` helper. Por eso el checkbox queda visualmente más bajo que el select.
|
|
|
|
## Diseño
|
|
- Cambiar `items-end` por `items-start` para que el checkbox se alinee con el `<select>` (no con el `<p>`).
|
|
- Mantener `pt-7` (o equivalente) en el wrapper del checkbox para compensar el `<label>` superior de la columna 1 (que tiene `mb-1` + line-height).
|
|
- Verificar en móvil (`grid-cols-1`) que se mantiene la separación vertical correcta.
|
|
|
|
## Acceptance
|
|
- En desktop (`sm:`), el checkbox está alineado verticalmente con el `<select>` (no con el `<p>` helper).
|
|
- El label del checkbox no se desplaza ni queda muy alto.
|
|
- En móvil, el grid colapsa a una columna y todo se apila correctamente.
|