/* ========================================================================== twenty-mobile.css — adaptação mobile do Twenty CRM (Grupo MG) v2 — 2026-06-26 Injetado no via nginx sub_filter (ver /etc/nginx/sites-available/twenty-crm). Editável aqui sem reiniciar o Twenty — basta o usuário dar F5 (asset no-cache). PRINCÍPIOS - Âncoras ESTÁVEIS: classes semânticas (.record-table-cell, .record-table-column-field-0, .scroll-wrapper-x-enabled), data-testid e :has() — NÃO usa classes hasheadas (mudam a cada build do Twenty). - Tudo sob @media (max-width:768px): casa com o breakpoint mobile do Twenty (≤768px = sem barra lateral). Acima disso o DESKTOP NÃO é tocado. - Aditivo e reversível: melhora o que o layout mobile nativo do Twenty já faz. Por que NÃO viram cards: a tabela é virtualizada (linhas posicionadas com altura fixa) — forçar cards via CSS sobrepõe as linhas. Mantém-se a tabela com a coluna Nome fixa (sticky, já nativo) + realce + scroll suave. ========================================================================== */ @media (max-width: 768px) { /* marcador de carga (diagnóstico) */ :root { --tw-mobile: 2; } /* iOS não dá auto-zoom ao focar um input se a fonte for >= 16px */ input, textarea, select, [contenteditable="true"] { font-size: 16px !important; } /* NOTA: NÃO escondemos [data-testid^="tooltip"] — no Twenty o próprio NOME do campo é um "texto-com-tooltip"; escondê-lo apagava os rótulos. No touch real (sem hover) os tooltips flutuantes não aparecem, então não atrapalham. */ /* ======================= ÁREA 1 — LISTA / TABELA ======================= */ /* scroll lateral com momentum + barra fina visível */ .scroll-wrapper-x-enabled { -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth; } .scroll-wrapper-x-enabled::-webkit-scrollbar { height: 6px; } .scroll-wrapper-x-enabled::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 6px; } /* a coluna Nome (field-0) já é sticky no Twenty: damos fundo sólido + sombra para ela não "vazar" o conteúdo das outras colunas ao rolar lateralmente e deixar claro que há mais colunas à direita */ .record-table-cell.record-table-column-field-0 { background: var(--twenty-color-background-primary, #fff) !important; box-shadow: 7px 0 8px -7px rgba(0,0,0,.28) !important; } /* ===================== ÁREA 2 — RECORD / CAMPOS ======================== */ /* Cada linha de campo (container que tem o rótulo id="label-…") vira um alvo de toque confortável e mais legível. Não é virtualizado → seguro. */ div:has(> [id^="label-"]) { min-height: 40px !important; } div:has(> [id^="label-"]) > :last-child { padding-top: 4px; padding-bottom: 4px; } /* ====== ÁREA 2/4 — EDITORES INLINE, DROPDOWNS, SELETORES (flutuantes) === */ /* o que abre flutuando ao manipular um campo nunca passa da largura da tela */ [role="listbox"], [role="menu"], [data-testid*="dropdown-menu"], [class*="DropdownMenu"], [class*="StyledDropdownMenuItemsContainer"] { max-width: 94vw !important; } /* itens de menu/opção com altura de toque adequada */ [role="menuitem"], [role="option"], li[role] { min-height: 40px !important; display: flex; align-items: center; } /* ===================== ÁREA 3 — MODAIS / DIÁLOGOS ====================== */ [role="dialog"] { max-width: 96vw !important; max-height: 92vh !important; } [data-testid="modal-backdrop"] > * { max-width: 100vw !important; } /* ===================== ÁREA 4 — ABAS DO RECORD ========================= */ /* abas (Início / Linha do Tempo / +Mais) roláveis sem quebrar o cabeçalho */ [class*="TabList"], [role="tablist"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } [class*="TabList"]::-webkit-scrollbar, [role="tablist"]::-webkit-scrollbar { display: none; } }