fix: mobile audit — expand nav groups, responsive tables/videos/layout

- Force all .oasis-nav-list groups open when hamburger panel is visible
  so user can see all nav options without tapping each group header
- Add responsive rules for video/iframe (max-width: 100%)
- Override fixed px widths (640, 800) from hardcoded video players
- Add overflow-x: auto to info tables (block-info-table, bank-info-table, etc.)
- Fix cell word-break in info tables to prevent overflow
- Make pre/code blocks scroll horizontally instead of breaking layout
- Fix modules_view.js: replace flex-wrap:nowrap with mode-buttons class

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

nodejs-project/nodejs-project/src/client/assets/styles/mobile.css

@@ -71,13 +71,20 @@ pre, code {
   flex-direction: row !important;
   align-items: center !important;
   flex: 1 !important;
-  flex-wrap: nowrap !important;
+  flex-wrap: wrap !important;   /* permite que el logo ocupe su fila propia */
   gap: 2px !important;
   width: auto !important;
   max-width: none !important;
   padding: 0 !important;
 }
 
+/* Logo: fila propia, hamburger y nav caen debajo */
+a.logo-icon {
+  flex: 0 0 100% !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
 .top-bar-right {
   display: flex !important;
   flex-direction: row !important;
@@ -88,6 +95,7 @@ pre, code {
   width: auto !important;
   max-width: none !important;
   padding: 0 !important;
+  align-self: flex-end !important; /* se alinea con la fila del hamburger */
 }
 
 .top-bar-left nav,
@@ -245,6 +253,15 @@ a.logo-icon img.logo-icon {
   flex-direction: column !important;
 }
 
+/* Forzar grupos de nav abiertos cuando el panel está visible */
+#mobile-menu-toggle:checked ~ .main-content .sidebar-left .oasis-nav-list {
+  max-height: 2000px !important;
+  overflow: visible !important;
+}
+#mobile-menu-toggle:checked ~ .main-content .sidebar-left .oasis-nav-arrow {
+  transform: rotate(180deg) !important;
+}
+
 /* ---- Tipografía ---- */
 h1 { font-size: 1.25em !important; }
 h2 { font-size: 1.1em !important; }
@@ -576,3 +593,79 @@ footer div {
 [style*="grid-template-columns:repeat(auto-fit"]  { grid-template-columns: 1fr !important; }
 [style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: 1fr !important; }
 [style*="width:50%"] { width: 100% !important; }
+
+/* ---- Vídeos y iframes: responsivos ---- */
+video,
+iframe,
+embed,
+object {
+  max-width: 100% !important;
+  width: 100% !important;
+  height: auto !important;
+}
+
+/* Forzar ancho responsivo para players con width fijo en HTML */
+[width="640"], [width="480"], [width="800"] {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+[style*="width: 640"], [style*="width:640"],
+[style*="width: 800"], [style*="width:800"],
+[style*="max-width: 800px"], [style*="max-width:800px"] {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* ---- Tablas info: evitar que rompan el layout ---- */
+.block-info-table,
+.bank-info-table,
+.tribe-info-table,
+.pm-info-table,
+.tag-table,
+.auction-bid-table {
+  display: block !important;
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  -webkit-overflow-scrolling: touch !important;
+  width: 100% !important;
+}
+
+.block-info-table td,
+.bank-info-table td,
+.tribe-info-table td {
+  white-space: normal !important;
+  word-break: break-word !important;
+  overflow-wrap: anywhere !important;
+  min-width: 80px !important;
+  max-width: 240px !important;
+}
+
+/* ---- Textos de contenido: no overflow horizontal ---- */
+.post-text, .block-text, .feed-text, .content-body,
+pre, code {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+  overflow-wrap: anywhere !important;
+}
+
+/* AI view, search, etc: max-width responsivo ---- */
+[style*="max-width: 800px"],
+[style*="max-width:800px"] {
+  max-width: 100% !important;
+}
+
+/* ---- Contenedores generales: no overflow horizontal ---- */
+.main-column > *,
+.feed-container,
+.posts-list,
+.blocks-list,
+.search-results,
+.stats-container,
+.wallet-section,
+.pubs-section,
+.invites-tribes {
+  max-width: 100% !important;
+  overflow-x: hidden !important;
+}

nodejs-project/nodejs-project/src/views/modules_view.js

@@ -78,7 +78,7 @@ const modulesView = () => {
     full: modules.map(m => m.name)
   };
 
-  const presetButtons = div({ class: 'preset-group', style: 'display:flex;gap:8px;flex-wrap:nowrap;margin-bottom:16px;' },
+  const presetButtons = div({ class: 'preset-group mode-buttons', style: 'margin-bottom:16px;' },
     Object.entries(PRESETS).map(([key, mods]) => {
       const presetLabel = (i18n[`modulesPreset_${key}`] || key).toUpperCase();
       const isActive = modules.every(m => mods.includes(m.name) === (moduleStates[`${m.name}Mod`] === 'on'));