/* * Ajustes de UI injetados no do vueapp.html.erb. * - Bloco @media (max-width:640px): correções pontuais/conservadoras de PWA mobile * (não é redesign — só conserta os piores vazamentos de layout no celular). * - Bloco GERAL (todas as telas): pequenos ajustes de bolha. * Não recompila nada; CSS puro sobre o front pré-compilado. */ /* GERAL: reduz o espaço entre a identificação do contato (**Nome:** das mensagens de grupo) e o texto. A Evolution prefixa com "**Nome:**" + 2 quebras -> o Chatwoot renderiza 2 parágrafos com margem grande; aqui apertamos a margem entre parágrafos da bolha (especificidade .prose-bubble p > as regras :where(p) do prose). */ .prose-bubble p { margin-top: 0.2rem !important; margin-bottom: 0.2rem !important; } @media (max-width: 640px) { /* nada de scroll/elemento vazando horizontalmente */ html, body { overflow-x: hidden; } /* Painel "Filtrar conversas" (classe lg:w-[750px]) vazava pra fora da tela à esquerda. Prende ele dentro do viewport, com rolagem se for alto. */ [class*='w-[750px]'] { position: fixed !important; left: 8px !important; right: 8px !important; top: 64px !important; width: auto !important; max-width: none !important; max-height: 80vh !important; overflow-y: auto !important; margin: 0 !important; } /* Modais e painéis largos não passam da largura da tela (só encolhe o que estoura — seguro). */ .modal-container, [class*='max-w-3xl'], [class*='max-w-2xl'], [class*='max-w-xl'] { max-width: calc(100vw - 16px) !important; } }