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; }
|
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
|
||||||
[x-cloak] { display: none !important; }
|
[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 {
|
:root {
|
||||||
--color-primary: #8eb02f;
|
--color-primary: #8eb02f;
|
||||||
--color-primary-dark: #6d8c24;
|
--color-primary-dark: #6d8c24;
|
||||||
|
|||||||
Reference in New Issue
Block a user