From 5c931c94006a28514c7e2459d668e8081e511d35 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Fri, 14 Aug 2026 21:52:54 -0500
Subject: [PATCH] fix(ui): los modales largos ya no dejan los botones fuera de
 pantalla
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 resources/views/layouts/main.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/resources/views/layouts/main.html b/resources/views/layouts/main.html
index 0c63fba..86cb980 100755
--- a/resources/views/layouts/main.html
+++ b/resources/views/layouts/main.html
@@ -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;