Auditoría responsive y profesionalización UI — 2026-07-02
Auditoría con agente sobre tamaños comunes: 360/390/430px (móvil), 768px (tablet), 1280px (laptop), 1440px+ (desktop). Nota inicial: 6.5/10. Base buena (grids con breakpoints, Recharts con ResponsiveContainer, modales con max-w, padding escalonado) pero con roturas concretas en móvil.
Corregido en esta sesión
| # | Problema | Fix |
|---|---|---|
| 1 | Tabla de transacciones (8 columnas → scroll horizontal en 360px) | Vista de cards en <640px (sm:hidden / hidden sm:block); cards con ID, descripción, categoría·cuenta, fecha, estado, monto y acciones de 44px |
| 2 | Calendario h-[750px] fijo (desborda viewport de 667px) | lg:h-[750px] — en móvil altura natural apilada; panel con max-h-[480px] propio |
| 3 | Drawer móvil de 240px | w-72 max-w-[85vw] (estándar Material, nunca tapa todo) |
| 4 | Botones ~34-38px (estándar táctil: 44px) | Regla global en globals.css: @media (pointer: coarse) → min-height: 44px para button/select/input/textarea. Desktop no cambia |
| 5 | Sin bottom nav (3 toques por navegación) | Nuevo components/bottom-nav.tsx: tab bar fija lg:hidden con Inicio/Movs/Cuentas/Metas/Más (Más abre el drawer). Safe-area iOS (env(safe-area-inset-bottom)), ítems de 56px. main con pb-24 lg:pb-8 |
| 6 | Modales max-h-[90vh] (barra de URL móvil los corta) | 90vh → 90dvh en accounts, goals, rules, transactions, settings-modals |
| 7 | Menubar apretado en 360px | px-3 + gap-2 + logo 26px en móvil, shrink-0/min-w-0 |
| 8 | Select de import con min-w-[240px] | w-full sm:w-auto sm:min-w-[240px] |
Verificación: tsc --noEmit limpio + next build exitoso.
Pendiente (menor)
- Tipografía
text-[9px]/text-[10px]en badges y atajos — mayormente visible solo en desktop tras el cambio a cards; subir a 11px al retocar cada componente. - Icon picker con círculo fijo de 140px (funciona, ajustado en 360px).
- QA visual real en dispositivos: probar en 360px (Android), 390px (iPhone), 768px (iPad) tras el deploy — especialmente el bottom nav con la PWA instalada (safe-area) y el tema claro.