From 0edf37594f80135771861938570ab7be201d151c Mon Sep 17 00:00:00 2001 From: SITO Date: Fri, 1 May 2026 02:10:46 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20audit=20=E2=80=94=20expand=20na?= =?UTF-8?q?v=20groups,=20responsive=20tables/videos/layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../src/client/assets/styles/mobile.css | 95 ++++++++++++++++++- .../nodejs-project/src/views/modules_view.js | 2 +- 2 files changed, 95 insertions(+), 2 deletions(-) diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css index 47bb7123..def58911 100644 --- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css +++ b/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; +} diff --git a/nodejs-project/nodejs-project/src/views/modules_view.js b/nodejs-project/nodejs-project/src/views/modules_view.js index 19c27f8d..6d9e0efb 100644 --- a/nodejs-project/nodejs-project/src/views/modules_view.js +++ b/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'));