mirror of https://github.com/fsolla/teqo.git synced 2026-11-15 18:53:06 +00:00

Francisco Solla 324e1c3c51 feat(B184): omnibox mobile sem moldura como padrão das listas (sticky no form, X de limpar no input, salvar filtro no header, cards edge-to-edge)

- Chassis CampaignListOmnibox (B127): abaixo de md a label some (input carrega
  aria-label), o campo perde borda/sombra (md: restaura), o form do filtro vira
  barra sticky com linha separadora (sticky no form porque não escapa do
  containing block — a coluna do input dentro do wrapper curto não grudava),
  o texto Limpar vira X circular dentro do input (chips OU busca; slot sempre
  renderizado com invisible; hit target 44px; live region de limpeza), botão
  texto Limpar desktop-only. Padrão para as 11 listas via
  campaignListOmniboxFormClassName.
- Municípios: Salvar filtro vira icon no header mobile (C94/C95 slot,
  presentation='icon', nome de rename = contrato 2.5.3); cards edge-to-edge
  com separador de linha (border-b last:border-b-0, -mx-4, gate md:).
- Atualizações: Nova atualização vai para o header mobile (único trailing
  mobile-visible que grudaria na barra).
- campaignMobileHeaderIconClassName compartilhada (3º consumidor).
- E2E mobile novo (390x844) com pins: foco/aria-expanded após limpar, salvar
  -> renomear no header, cards, desktop invertido.
- D7 registrado no caminho: sticky dos headers da tabela desktop morto.

2026-08-10 03:11:43 -03:00

2.4 KiB

Raw Blame History

D7 — Sticky dos headers da tabela desktop quebrado (headers não grudam ao rolar)

Status: registrado Atualizado em: 2026-08-10 Issue: (criada via agent:register) Priority: P3 Model: composer-2.5 Impeccable: A (só backend/UI interna)

Diagnóstico (medido durante B184, 2026-08-09)

Na lista de municípios em desktop (viewport 1440px, prod build local), os headers da tabela ([&_th]:sticky [&_th]:top-0 em MunicipalityList.tsx → CampaignTable) não grudam: o th computa position: sticky, mas rola junto com o conteúdo (medido: top 174 → −326 ao scrollar 500px no scrollport). A feature do B41 está silenciosamente morta.

Causa-raiz (mesma classe de bug do sticky do omnibox B184): o wrapper da tabela (CampaignTable containerClassName="overflow-x-auto …") é um scroll container (overflow-x não-visible torna o elemento scroll container nos dois eixos). Ele nunca rola verticalmente — o scroll vertical acontece no #campaign-content-scroll (pai). O position: sticky do th gruda relativo ao scroll container mais próximo (o wrapper), que não rola → o sticky nunca engaja. [&_th]:sticky é hoje CSS morto em todas as listas que usam CampaignTable.

Abordagem sugerida (investigar na execução)

A) Fazer o wrapper não ser scroll container para o eixo vertical mantendo o horizontal: overflow-x: clip não rola — precisa de outro mecanismo para tabelas mais largas que o container.
B) Estrutural: mover o scroll horizontal para dentro do fluxo vertical (ex. o scroll acontece na região da tabela com o header fixo por JS/position: sticky num elemento irmão do scroller).
C) Aceitar e remover as classes [&_th]:sticky mortas (documentar o não-suporte).
Recomendação preliminar: reproduzir nas N listas CampaignTable; avaliar B com um sticky real só no header (JS-free se houver arranjo de DOM possível, senão pin por scroll listener no scrollport); C como fallback honesto. Fora de escopo: mudar o padrão de scroll da página.

Escopo

Reprodução: /campanha/municipios (e demais listas com CampaignTable).
Sem migration, access, dados.

Rabbit holes

Reescrever o layout das listas para "inner scroll" sem pedido — se a solução exigir mudança de UX de scroll, parar e propor antes.
Mover o scroll para o tbody/tabela via display: block — quebra a semântica/larguras de coluna.

2.4 KiB Raw Blame History Unescape Escape