fix(ui): los modales largos ya no dejan los botones fuera de pantalla

En pantallas bajas (o con formularios largos como el de portal-usuarios)
el panel del modal se salía de la ventana y no había forma de llegar a
Guardar ni a Cancelar.

La regla va en el layout y no en cada vista: son ~214 modales repartidos
en las plantillas y arreglarlos uno por uno garantizaba olvidarse varios.
El selector toma solo los overlays centrados y deja afuera los 4 paneles
laterales, que ya manejan su propio scroll.

El alto se mide en % y no en vh/dvh: el overlay es inset-0, o sea que ya
es exactamente la caja visible. Medido en Edge headless a 600/900/700/420
de alto: el panel queda siempre en ventana-2rem, el tope nunca se recorta,
y Guardar se alcanza scrolleando. Con ventana alta el panel conserva su
alto natural y no scrollea.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-08-14 21:52:54 -05:00
co-authored by Claude Sonnet 5
parent 115f1675ad
commit 5c931c9400
+21
View File
@@ -28,6 +28,27 @@
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
[x-cloak] { display: none !important; }
/* Modales: el panel nunca puede pasar del alto de la ventana. Sin
esto, un formulario largo (o una pantalla baja / un portátil) deja
los botones Guardar y Cancelar fuera de vista y sin forma de
llegar a ellos.
Va acá y no en cada vista a propósito: son ~214 modales repartidos
en las plantillas y arreglarlos uno por uno garantizaba olvidarse
varios. El selector toma los overlays centrados
(.fixed.inset-0 + .items-center) y deja afuera los paneles
laterales (justify-end), que ya manejan su propio scroll.
El alto se mide en % y no en vh/dvh a propósito: el overlay es
inset-0, o sea que YA es exactamente la caja visible, así que el
100% es el alto real. Con vh el panel quedaba más alto que la
ventana (medido: ventana 516px, panel 532px) porque vh no siempre
coincide con el viewport efectivo. */
.fixed.inset-0.items-center > div {
max-height: calc(100% - 2rem);
overflow-y: auto;
}
:root {
--color-primary: #8eb02f;
--color-primary-dark: #6d8c24;