App responsivo no celular — o que funciona no iPhone

Estado atual

O app do Lefia funciona bem em desktop e foi adaptado pra iPhone com Fase A quick wins + ResponsiveTable component (PR #341).

O que funciona bem em mobile (<md)

• Sidebar drawer abre via botao menu (top-left)
• Bell icon notificacoes badge + dropdown
• PageHeader actions descem pra linha 2 (todas as 43 paginas)
• TenantListView (monitor): mostra Status + Empresa + Mensagens + Erros + link. Cols Plan/Success/ErrorRate/Integrations escondidas em mobile.
• MessageDetailModal: full-screen mobile (sem dialog limitado)
• Tabelas execucoes: scroll horizontal quando ultrapassa viewport

O que ainda nao foi otimizado (Fase C)

• Modais grandes (ticket-modal, dsr-manager, etc) ainda usam dialog limitado
• Edi-hub drawers (mapping editor) sao desktop-first
• Reports nao tem alternative card-stack view ainda

Pra desenvolvedores

Usar ResponsiveTable component (src/components/ui/responsive-table.tsx) em tables novas:

<ResponsiveTable>
  <ResponsiveTableHead>
    <ResponsiveTableRow header>
      <ResponsiveTableCol priority={1}>Nome</ResponsiveTableCol>
      <ResponsiveTableCol priority={2}>Email</ResponsiveTableCol>
      <ResponsiveTableCol priority={3}>Ultima atividade</ResponsiveTableCol>
    </ResponsiveTableRow>
  </ResponsiveTableHead>
  <ResponsiveTableBody>
    {rows.map(r => (
      <ResponsiveTableRow key={r.id}>
        <ResponsiveTableCol priority={1}>{r.name}</ResponsiveTableCol>
        <ResponsiveTableCol priority={2}>{r.email}</ResponsiveTableCol>
        <ResponsiveTableCol priority={3}>{r.lastActive}</ResponsiveTableCol>
      </ResponsiveTableRow>
    ))}
  </ResponsiveTableBody>
</ResponsiveTable>

Priority semantic:

• 1 = always visible (mobile + desktop)
• 2 = md+ (>=768px)
• 3 = lg+ (>=1024px)