rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0f174db0d18e40e5cd0a07806f4fedaa8a616e13
mercadodevida/work/artifacts/F-053/architect.md
chattie 6a74f5ede6 feat(F-053): completed feature
2026-08-19 10:48:35 +02:00

1.1 KiB
Raw Blame History

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.