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:
co-authored by
Claude Sonnet 5
parent
115f1675ad
commit
5c931c9400
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user