fix(responsive): ninguna vista hace scrollear la página de lado en móvil

Primera tanda de la auditoría responsive, sobre el panel y el portal.

De 59 vistas con tabla, 55 ya envolvían la tabla en un contenedor con
scroll propio; las 4 que faltaban (url_monitor, servidor_dashboard,
partner_recursos, notif_config) hacían scrollear la página entera de lado
en un teléfono. Ahora tienen el mismo contenedor que el resto.

Y una red por debajo en los dos layouts: en pantallas chicas el desborde
se contiene en vez de romper el layout, y pre/code scrollean en su caja.
Es para lo que se agregue después y se olvide el contenedor — el mismo
criterio que se usó con los modales, porque revisar 59 vistas a mano cada
vez que se suma una garantiza que alguna se escape.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

resources/views/layouts/main.html

@@ -28,6 +28,17 @@
         body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
         [x-cloak] { display: none !important; }
 
+        /* Nada debe hacer scrollear la página entera de lado en un teléfono.
+           Las tablas anchas ya scrollean en su propio contenedor; esto es la
+           red por debajo para lo que se agregue después y se olvide el
+           contenedor: el desborde se contiene en vez de romper el layout. */
+        @media (max-width: 640px) {
+            body { overflow-x: hidden; }
+            table { max-width: 100%; }
+            pre, code { overflow-x: auto; max-width: 100%; }
+        }
+
+
         /* 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

resources/views/layouts/portal.html

@@ -14,6 +14,17 @@
     *, *::before, *::after { box-sizing: border-box; }
     body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f8fafc; }
     [x-cloak] { display: none !important; }
+
+        /* Nada debe hacer scrollear la página entera de lado en un teléfono.
+           Las tablas anchas ya scrollean en su propio contenedor; esto es la
+           red por debajo para lo que se agregue después y se olvide el
+           contenedor: el desborde se contiene en vez de romper el layout. */
+        @media (max-width: 640px) {
+            body { overflow-x: hidden; }
+            table { max-width: 100%; }
+            pre, code { overflow-x: auto; max-width: 100%; }
+        }
+
     :root { --brand: #8eb02f; --brand-dark: #6d8c24; }
   </style>
 </head>

resources/views/notif_config.html

@@ -9,7 +9,7 @@
 
   <!-- Tabla de configuración -->
   <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
-    <table class="w-full text-sm">
+    <div class="overflow-x-auto"><table class="w-full text-sm">
       <thead>
         <tr class="bg-slate-50 border-b border-slate-200">
           <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider w-48">Evento</th>
@@ -78,7 +78,7 @@
           </tr>
         </template>
       </tbody>
-    </table>
+    </table></div>
   </div>
 
   <!-- Ayuda: Telegram para portal users -->

resources/views/partner_recursos.html

@@ -48,7 +48,7 @@
 
     <!-- Lista de recursos -->
     <div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
-      <table class="w-full text-sm">
+      <div class="overflow-x-auto"><table class="w-full text-sm">
         <thead>
           <tr class="bg-slate-50 border-b border-slate-200 text-xs font-semibold text-slate-500 uppercase tracking-wider">
             <th class="px-4 py-3 text-left">Nombre</th>
@@ -159,7 +159,7 @@
             <td colspan="6" class="px-4 py-10 text-center text-slate-400 text-sm">Sin recursos aún.</td>
           </tr>
         </tbody>
-      </table>
+      </table></div>
     </div>
   </div>
 

resources/views/servidor_dashboard.html

@@ -160,7 +160,7 @@
                   </button>
                   <template x-if="showProcs">
                     <div class="mt-1.5 bg-slate-50 rounded-lg overflow-hidden">
-                      <table class="w-full text-[10px]">
+                      <div class="overflow-x-auto"><table class="w-full text-[10px]">
                         <thead><tr class="text-slate-400 border-b border-slate-200">
                           <th class="px-2 py-1 text-left">Proceso</th>
                           <th class="px-2 py-1 text-right">CPU%</th>
@@ -177,7 +177,7 @@
                             </tr>
                           </template>
                         </tbody>
-                      </table>
+                      </table></div>
                     </div>
                   </template>
                 </div>

resources/views/url_monitor.html

@@ -69,7 +69,7 @@
 
     <!-- Table rows -->
     <div x-show="!cargando && items.length > 0">
-      <table class="w-full text-sm">
+      <div class="overflow-x-auto"><table class="w-full text-sm">
         <thead>
           <tr class="bg-slate-50 border-b border-slate-200">
             <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Nombre / URL</th>
@@ -169,7 +169,7 @@
             </tr>
           </template>
         </tbody>
-      </table>
+      </table></div>
     </div>
   </div>
 
@@ -305,7 +305,7 @@
         <div x-show="!logs.cargando && !logs.vacio">
           <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Últimos registros</h3>
           <div class="border border-slate-200 rounded-xl overflow-hidden">
-            <table class="w-full text-xs">
+            <div class="overflow-x-auto"><table class="w-full text-xs">
               <thead>
                 <tr class="bg-slate-50 border-b border-slate-200">
                   <th class="px-3 py-2 text-left font-semibold text-slate-500">Fecha</th>
@@ -337,7 +337,7 @@
                   </tr>
                 </template>
               </tbody>
-            </table>
+            </table></div>
           </div>
           <p x-show="logs.items.length > 50" class="text-xs text-slate-400 mt-2 text-center"
             x-text="'Mostrando últimos 50 de ' + logs.items.length + ' registros'"></p>