/* ===================================================================== P05 — correcao de overflow horizontal em mobile Autor: CLAUDE_CODE (B550) · lane P05_APP · 2026-08-10 Problema comprovado (medido em viewport 375px): document.scrollWidth = 614 vs innerWidth = 375 Causa: no breakpoint 820px a .sidebar vira faixa horizontal e a .main-nav passa a rolar em X, mas nem o shell nem os containers flex/grid tinham min-width:0 / max-width:100%. Em flex e grid o min-width padrao e `auto`, entao os .nav-item empurravam o pai alem do viewport e o estouro subia ate o . Arquivo ADITIVO de proposito: styles.css nao e editado, para manter o diff rastreavel e a reversao trivial (basta remover o ). ===================================================================== */ @media (max-width: 820px) { html, body { max-width: 100%; overflow-x: hidden; } /* min-width:0 e o que efetivamente permite o filho encolher */ .app-shell, .main-content, .sidebar, .main-nav { min-width: 0; max-width: 100%; } .sidebar { overflow-x: hidden; } /* a nav rola sozinha em X, sem contaminar o documento */ .main-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* faixas que podem exceder a largura rolam dentro do proprio container */ .stat-grid, .market-meta, .flow-line, .scoreboard, .audit-list { max-width: 100%; } /* texto longo (urls, ids, nomes de time) quebra em vez de alargar a caixa */ .source-item, .source-item small, .audit-row, .audit-row span { overflow-wrap: anywhere; min-width: 0; } }