mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-13 06:43:06 +00:00
feat(B196): omnibox colado ao header e card mobile mais denso (Closes #607)
Chassis de lista (vale para todas as listas, gate A): - scrollport: max-md:has-[.campaign-list-omnibox-form]:pt-0 — o containing block do sticky passa a começar no topo; a barra cola no header (sem vão de 16px, nada passa por cima no scroll) - barra densa: campo min-h-8 py-0 + X size-8 → ~40px no total; anel de foco escopado a md (mobile sem anel de cor; caret é o indicador) - trailing cluster desktop-only por padrão (edgeToEdge removido) - pt-4 md:pt-0 nas 6 listas com linha de ações antes do form (incl. organizacoes) Card mobile (B193 densificado): - nome 18px leading-tight com território a ~2px - chips como blocos label-acima (Classe/Tendência/Nível, gate B) via ChipBlock - avatares numa linha por grupo com overlap proporcional (flex-1 cells, sem cap/wrap/…, overflow-hidden nas bordas) — prop wrap → overlapRow - MissingAdvisorBadge com wrap para não clipar na célula do grupo - densidade vertical gap-2.5/py-3; toques min-h-11 preservados e2e B196 (6 testes) + regressão B184/B183/B193 verde.
This commit is contained in:
Francisco Solla
parent
1f68e543c5
commit
02abd7de89
14 changed files with 426 additions and 77 deletions
82
docs/plans/municipios-mobile-polimento-omnibox-cards-impl.md
Normal file
82
docs/plans/municipios-mobile-polimento-omnibox-cards-impl.md
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
# Impl: Municípios mobile: omnibox colado ao header e card mais denso (pós-B193/B184)
|
||||
|
||||
Status: aprovado
|
||||
Atualizado em: 2026-08-10
|
||||
Issue: #607
|
||||
Intenção: docs/plans/municipios-mobile-polimento-omnibox-cards.md
|
||||
Appetite restante: herdado (~0,5–1 dia eng) — sem estouro: mudanças de superfície em 2 shared + 1 card + 1 avatar + 5 pages + e2e
|
||||
|
||||
## Leitura da intenção
|
||||
|
||||
- **Outcome:** em `/campanha/municipios` mobile (< md), a barra de filtro cola no header (sem vão, nada passa por cima no scroll), o campo fica ~40px no total, foco sem anel de cor, nome 18px com território colado, chips Classe/Tendência/Nível com label acima, avatares numa linha por grupo com sobreposição dinâmica — padrão do chassis vale para TODAS as listas (gate A); chip de classe ganha label "Classe" (gate B).
|
||||
- **O que NÃO negociar:** desktop (`md+`) intacto; sheets/edit-where-you-see intactos; labels/dados dos chips intactos; nenhum limite de avatares com "…"; área de toque dos controles do card não encolhe.
|
||||
- **O que reavaliar:** a hipótese da intenção ("encurtar o vão no contexto da barra — não o padding global do scrollport") é correta e foi confirmada: o sticky não pode subir acima do containing block (o shell), que começa 16px abaixo do scrollport por causa do `p-4` do `CampaignContentScroll`. Qualquer fix no form isolado falha (clamp do containing block).
|
||||
|
||||
## Abordagem recomendada
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[CampaignContentScroll<br/>max-md:has-[marcador]:pt-0] --> B[form sticky ancora em y=0<br/>colado ao header]
|
||||
B --> C[omnibox denso: min-h-8 py-1<br/>X size-8 · ring só md]
|
||||
C --> D[card: nome 18px tight · chips label-acima<br/>avatares overlap row]
|
||||
D --> E[e2e B196 + gates]
|
||||
```
|
||||
|
||||
**Opções consideradas:** A | B | C
|
||||
**Recomendação:** A — resolver o vão via `:has()` no scrollport (o scrollport "sabe" quando hospeda a barra sticky; o form carrega um marcador de classe estável). É a única correção que move o containing block do sticky para y=0 sem tocar o padding global nem as 11 páginas de lista.
|
||||
**Rejeitadas:**
|
||||
|
||||
- **B — `-mt-4` no form:** o sticky não sobe acima do containing block; com a borda do shell a 16px, o clamp continua em 16 (e o natural position vira 0 ≠ posição colada no scroll → barra "pula"). Medido na exploração: `formY=72` = header 56 + 16.
|
||||
- **C — `pt-0` global no scrollport / remover `p-4`:** rabbit hole nomeado na intenção; destrói a folga do topo de todas as telas (dashboard, wizard…). O `:has()` escopa o `pt-0` só para páginas com o form de lista.
|
||||
|
||||
### Componentes / mudanças
|
||||
|
||||
- **`campaignListOmniboxFormClassName`** (`src/components/campaign/shared/CampaignListOmnibox.tsx`): adiciona o marcador `campaign-list-omnibox-form` ao bloco de classes existente (contrato do `:has()`). Barra: `py-2` → `py-1` no mobile (`md:py-0` preservado). Nada mais muda aqui — sticky/`-mx-4`/border-b ficam.
|
||||
- **Campo do omnibox** (mesmo arquivo): `min-h-11` → `min-h-8`, `py-1.5` → `py-1` no mobile (`md:min-h-11 md:py-1.5` restauram o desktop); botão "Limpar" X `size-11` → `size-8` (span interno `size-7` → `size-6`, ícone `size-4` → `size-3.5`; `md:hidden` já é mobile-only); anel de foco `focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50` → escopado a `md:` (mobile sem anel/contorno de cor — caret é o indicador; contrato B184 borderless preservado). `text-sm` do input INTOCADO (contrato B183: 16px touch).
|
||||
- Total da barra mobile: 32 (min-h-8) + 8 (py-1×2) + 1 (border-b) = **41px ≈ 40** ✓. Área de toque do X = 32px — aceitável porque o alvo real é o campo (o X vive dentro dele).
|
||||
- **`CampaignContentScroll`** (`src/components/campaign/shell/CampaignQuickActionsHost.tsx`): `p-4` → adiciona `max-md:has-[.campaign-list-omnibox-form]:pt-0` (desktop `md:p-6` intocado). Efeito: só páginas com o form de lista perdem o padding-top no mobile; o shell (containing block do sticky) passa a começar em y=0 → barra cola no header e cards nunca passam por cima. Fallback se o arbitrary variant do Tailwind v4 não compilar: regra CSS pura em `styles.css` sob `@media (width < 48rem)` com o mesmo seletor.
|
||||
- **Compensação das 6 listas com linha de ações antes do form** (`atividades`, `liderancas`, `apoiadores`, `demandas`, `dobradinhas`, `organizacoes` — verificadas na exploração): `pt-4 md:pt-0` no `div.flex.justify-end` que precede o form (respiro no topo que o `pt-0` removeu; desktop inalterado). `municipios`, `territorios`, `atualizacoes`, `pessoas`, `assessores` têm o form como primeiro filho visível — sem compensação.
|
||||
- **`MunicipalityMobileCard`** (`src/components/campaign/municipality/MunicipalityMobileCard.tsx`):
|
||||
- Nome: `<h3>` ganha `text-lg leading-tight` (18px/22.5px vs 24px/32px atuais do `h3` global em `styles.css:371`); `gap-0.5` existente → território a ~2–4px do texto (linha-box enxuta é o que fecha o vão medido de ~13px). Badge "Cidade" e link stretch intactos.
|
||||
- Chips: bloco `flex flex-col gap-0.5` por chip com `ChipLabel` acima do valor (gate B), substituindo o `inline-flex items-center` atual; linha de chips `items-start gap-x-3 gap-y-2` (1–2 linhas aceitas pelo gate); valores com `whitespace-nowrap` (nenhum chip quebra no meio). `chipTriggerClassName` vira o estilo de bloco (sem pílula de hover: `hover:bg-transparent`; `min-h-11` mantido para a área de toque; label+valor são o alvo do tap). A label "Classe" é renderizada no CALL SITE do card (`<ChipBlock label="Classe">`), não dentro de `TerritorialClassCardReadout` — o readout continua compartilhado com a tabela desktop intocado. Caso cidade: Tendência/Nível/Classe como blocos com os mesmos valores ("Não registrada", dash). `MissingAdvisorBadge` ganha wrap (`whitespace-normal h-auto`) para o pill não clipar na célula de ~110px do grupo (desktop segue uma linha).
|
||||
- Densidade: article `gap-3` → `gap-2.5` e `p-4` → `px-4 py-3` (vertical denso; horizontal mantém o edge-to-edge B184; toques `min-h-11` dos controles intactos).
|
||||
- **`MunicipalityRelationAvatarStack`** (`src/components/campaign/shared/MunicipalityRelationAvatarStack.tsx`): o modo `wrap` (B193) vira **overlap row dinâmica** — células `flex-1` com avatar fixo centralizado: poucos avatares → sem sobreposição (célula > 28px), muitos → sobreposição proporcional à contagem, sem wrap, sem cap, sem "…", todos visíveis (a linha ocupa exatamente a largura do grupo; casos patológicos de dezenas de avatares degradam para pilha — sr-only continua com todos os nomes). Renomear a prop `wrap` → `overlapRow` (honestidade da semântica; 2 call sites no card + 1 em `MunicipalityAdvisorAvatarStack`). Adicionar `data-view="relation-avatars"` na linha (hook de teste, precedente `data-view="mobile-cards"`). Desktop (`-space-x-2`, cap 3, tooltip) intocado.
|
||||
- **`MunicipalityAdvisorAvatarStack`** (mesmo arquivo): passa `wrap` → `overlapRow` no modo denso (call site do card não-coordenador).
|
||||
- **Migration:** sem migration (nenhuma mudança de schema/collection/global).
|
||||
- **Access / Consent:** nenhum (zero paths de escrita tocados).
|
||||
- **UI:** Impeccable B — encaixe na tela existente; shape (classes acima) → craft (browser, 390px) → critique (contrastes/vão/overlap) → polish.
|
||||
|
||||
### Dados → forma
|
||||
|
||||
N/A — nenhuma métrica nova; é densidade e alinhamento de superfície existente (intenção: "Vou apresentar dados? Não").
|
||||
|
||||
## Fases verificáveis
|
||||
|
||||
1. **Tracer — chassis da barra** (maioria do appetite): marcador de classe + `:has()` no scrollport + densidade do campo/X/anel + compensação das 5 páginas. Verificar: `pnpm exec tsc --noEmit` + e2e B184/B183 existentes + novos e2e B196 (barra colada, altura ≤44, sem anel no foco).
|
||||
2. **UI — card denso**: nome/território, chips label-acima, overlap row de avatares, densidade vertical. Verificar: e2e B193 existentes + novos e2e B196 (nome 18px, território colado, label acima do badge, avatares numa linha com overlap e sem overlap quando poucos).
|
||||
3. **Gates**: `pnpm gate:fast` completo (tsc, lint, format, knip, cycles, unit+int, e2e do conjunto afetado) e `pnpm build`.
|
||||
|
||||
## Rabbit holes / Não escopo (engenharia)
|
||||
|
||||
- Não tocar `p-4`/`pb-*` do scrollport fora do `:has()` — o `pt-0` é escopado e é O fix do containing block.
|
||||
- Não mudar `text-sm` do input (contrato B183), nem o desktop do omnibox (`md:*` restaura tudo).
|
||||
- Não criar sistema de avatares novo — só o modo denso do componente existente.
|
||||
- **Alinhamento dos avatares no grupo (adiado):** com poucos avatares a pilha fica centralizada no grupo (label à esquerda) — ancorar à esquerda mudaria o perfil de overflow para o grupo vizinho com 4+ avatares; revisitável se o product pedir (gatilho: review Impeccable do /simplify).
|
||||
- Não polir o rodapé de atualização nem outras arestas do card (item separado na intenção).
|
||||
- Não mexer em sheets, tooltips de desktop, busca/sugestões do omnibox.
|
||||
|
||||
## Riscos e mitigação
|
||||
|
||||
- **Tailwind v4 não compilar `max-md:has-[.campaign-list-omnibox-form]:pt-0`:** verificar no build da Fase 1; fallback = regra CSS pura em `styles.css` (`@media (width < 48rem)` + `.campaign-content-scroll:has(.campaign-list-omnibox-form)`).
|
||||
- **e2e B193 regressar:** `card.getByText('Nível', { exact: true }).click()` — a label continua DENTRO do trigger (bloco label-acima), então o clique continua abrindo o sheet; `[data-view="mobile-cards"]` e classes de borda intactas.
|
||||
- **Janela estreita-desktop (container < 48rem) vê o card densificado:** aceito — é o MESMO componente mobile (B193 já o estiliza com variantes `md:` no article); o desktop de verdade (tabela) não é tocado.
|
||||
- **Listas com linha de ações antes do form** perdem o respiro no topo com o `pt-0`: mitigado pelo `pt-4 md:pt-0` nas 5 páginas; e2e de regressão no `/campanha/atividades` (barra colada após scroll).
|
||||
- **`has-` casar páginas além das listas:** o marcador só existe em `campaignListOmniboxFormClassName`, usado exclusivamente pelos 11 `*Filters` (verificado por grep); wizard usa forms sem `role="search"`/marcador.
|
||||
|
||||
## Aceite de engenharia
|
||||
|
||||
- [x] Aceite de produto da intenção ainda coberto (vão zero, barra ~40px, sem anel, nome 18px+território colado, chips label-acima, avatares 1 linha sem cap/wrap/"…"; desktop intacto)
|
||||
- [x] Invariantes AGENTS/engineering-standards (sem schema, sem access, sem Consent; nomes de props em inglês; copy pt-BR preservada)
|
||||
- [x] Testes previstos: e2e B196 (barra colada + altura + anel + nome/território + labels + overlap de avatares) + regressão B184/B183/B193 existentes; sem unit/int novos (mudança puramente de superfície)
|
||||
|
||||
Self-score decision-quality: 5/5 (decisões caras com rejeitadas; cabe no appetite; rabbit holes nomeados; reusa chassis existente — zero módulos novos; intenção preservada)
|
||||
|
|
@ -84,7 +84,7 @@ export default async function SupportersPage({ searchParams }: SupportersPagePro
|
|||
|
||||
return (
|
||||
<CampaignPageShell>
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
|
||||
<div className="flex flex-col gap-2 pt-4 sm:flex-row sm:justify-end md:pt-0">
|
||||
{isCampaignCoordinator(user) ? (
|
||||
<Button asChild variant="outline" className="min-h-11">
|
||||
<Link href="/campanha/apoiadores/importar">
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export default async function ActivityListPage({ searchParams }: ActivityListPag
|
|||
return (
|
||||
<CampaignPageShell>
|
||||
{canCreate ? (
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
<div className="flex flex-wrap justify-end gap-2 pt-4 md:pt-0">
|
||||
<Button asChild variant="outline" className="min-h-11">
|
||||
<Link href={TOUR_COMPOSER_PATH}>
|
||||
<MapPinnedIcon data-icon="inline-start" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export default async function DemandsPage({ searchParams }: DemandsPageProps) {
|
|||
|
||||
return (
|
||||
<CampaignPageShell>
|
||||
<div className="flex justify-end">
|
||||
<div className="flex justify-end pt-4 md:pt-0">
|
||||
<Button asChild className="min-h-11">
|
||||
<Link href="/campanha/demandas/nova">
|
||||
<PlusIcon data-icon="inline-start" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -323,7 +323,7 @@ export default async function StateDeputiesPage({ searchParams }: StateDeputiesP
|
|||
|
||||
return (
|
||||
<CampaignPageShell>
|
||||
<div className="flex justify-end">
|
||||
<div className="flex justify-end pt-4 md:pt-0">
|
||||
<Button asChild className="min-h-11">
|
||||
<Link href="/campanha/dobradinhas/nova">
|
||||
<PlusIcon data-icon="inline-start" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -417,7 +417,7 @@ export default async function LeadershipsPage({ searchParams }: LeadershipsPageP
|
|||
|
||||
return (
|
||||
<CampaignPageShell>
|
||||
<div className="flex justify-end">
|
||||
<div className="flex justify-end pt-4 md:pt-0">
|
||||
<Button asChild className="min-h-11">
|
||||
<Link href="/campanha/liderancas/nova">
|
||||
<PlusIcon data-icon="inline-start" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export default async function OrganizationsPage({ searchParams }: OrganizationsP
|
|||
|
||||
return (
|
||||
<CampaignPageShell>
|
||||
<div className="flex justify-end">
|
||||
<div className="flex justify-end pt-4 md:pt-0">
|
||||
<Button asChild className="min-h-11">
|
||||
<Link href="/campanha/organizacoes/nova">
|
||||
<PlusIcon data-icon="inline-start" aria-hidden="true" />
|
||||
|
|
|
|||
|
|
@ -26,9 +26,16 @@ export const advisorEntriesFromIds = (
|
|||
* overview's coluna da vergonha uses to count them. Non-priority ones keep the
|
||||
* softer pending tone: they are a gap, not a fire. It stands in for the advisor
|
||||
* names, so it only ever states an absence.
|
||||
*
|
||||
* B196: inside the mobile card's ~110px relation group the pill must wrap
|
||||
* (`whitespace-normal`, no fixed height) instead of clipping mid-letter —
|
||||
* on the wide desktop cell it still renders on a single line.
|
||||
*/
|
||||
export const MissingAdvisorBadge = ({ isPriority }: { isPriority: boolean }) => (
|
||||
<Badge variant={isPriority ? 'destructive' : 'estimate-pending'}>
|
||||
<Badge
|
||||
variant={isPriority ? 'destructive' : 'estimate-pending'}
|
||||
className="h-auto min-h-5 whitespace-normal text-center"
|
||||
>
|
||||
<CircleAlertIcon data-icon="inline-start" aria-hidden="true" />
|
||||
{isPriority ? 'Sem responsável' : municipalityListCoverageLabels.sem_assessor}
|
||||
</Badge>
|
||||
|
|
@ -49,14 +56,12 @@ export const formatAdvisorNamesTooltip = (
|
|||
export const MunicipalityAdvisorAvatarStack = ({
|
||||
advisors,
|
||||
isPriority,
|
||||
maxVisible = 3,
|
||||
wrap = false,
|
||||
overlapRow = false,
|
||||
}: {
|
||||
advisors: MunicipalityAdvisorAvatarEntry[]
|
||||
isPriority: boolean
|
||||
maxVisible?: number
|
||||
/** B193 — dense mobile card mode: every advisor gets an avatar, rows wrap. */
|
||||
wrap?: boolean
|
||||
/** B196 — dense mobile card mode: every advisor gets an avatar in one overlapping row. */
|
||||
overlapRow?: boolean
|
||||
}) => {
|
||||
if (!advisors.length) return <MissingAdvisorBadge isPriority={isPriority} />
|
||||
|
||||
|
|
@ -64,8 +69,7 @@ export const MunicipalityAdvisorAvatarStack = ({
|
|||
<MunicipalityRelationAvatarStack
|
||||
entries={advisors.map((advisor) => ({ id: advisor.id, label: advisor.name }))}
|
||||
emptyState={null}
|
||||
maxVisible={maxVisible}
|
||||
wrap={wrap}
|
||||
overlapRow={overlapRow}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,16 +81,35 @@ type MunicipalityMobileCardProps = {
|
|||
signalFormAction: MunicipalityStaffFormAction
|
||||
}
|
||||
|
||||
/** Dense chip trigger styling shared by the Tendência/Nível chips (B193). */
|
||||
const chipTriggerClassName = 'min-h-8 rounded-full px-2.5'
|
||||
/**
|
||||
* B196 — dense chip trigger styling shared by the Tendência/Nível chips:
|
||||
* the whole label+value block is the tap target, label above the pill
|
||||
* (gate B). `hover:bg-transparent` kills the base trigger's hover pill —
|
||||
* the block reads as label+value, not a button. `min-h-11` keeps the touch
|
||||
* target the plan's own `min-h-0` would have cut.
|
||||
*/
|
||||
const chipTriggerClassName =
|
||||
'flex min-h-11 flex-col items-start justify-center gap-0.5 rounded-md px-1 hover:bg-transparent'
|
||||
|
||||
/** Ghost trigger styling for the read-only relation groups (no hover pill). */
|
||||
const relationTriggerClassName = 'min-h-0 rounded-md bg-transparent px-0 hover:bg-transparent'
|
||||
/** Ghost trigger styling for the read-only relation groups (no hover pill).
|
||||
* `w-full` keeps the avatar overlap row constrained to the group's flex-1
|
||||
* box — without it the inline-block button grows with the avatars' min-content
|
||||
* and the stack spills into the neighbouring group (B196). */
|
||||
const relationTriggerClassName =
|
||||
'min-h-0 w-full rounded-md bg-transparent px-0 hover:bg-transparent'
|
||||
|
||||
const ChipLabel = ({ children }: { children: ReactNode }) => (
|
||||
<span className="text-xs font-medium text-muted-foreground">{children}</span>
|
||||
)
|
||||
|
||||
/** B196 (gate B) — one chip block: label above the value pill. */
|
||||
const ChipBlock = ({ label, children }: { label: string; children: ReactNode }) => (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<ChipLabel>{label}</ChipLabel>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
/** Read-only city rows render a plain dash everywhere a control would sit. */
|
||||
const CityDash = () => <span className="text-muted-foreground">—</span>
|
||||
|
||||
|
|
@ -105,7 +124,7 @@ const RelationGroupTrigger = ({
|
|||
}) => (
|
||||
<div className="flex w-full min-w-0 flex-col gap-1.5">
|
||||
<ChipLabel>{label}</ChipLabel>
|
||||
<MunicipalityRelationAvatarStack entries={entries} emptyState={emptyState} wrap />
|
||||
<MunicipalityRelationAvatarStack entries={entries} emptyState={emptyState} overlapRow />
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
@ -180,13 +199,16 @@ export const MunicipalityMobileCard = ({
|
|||
return (
|
||||
<article
|
||||
className={cn(
|
||||
'relative flex flex-col gap-3 rounded-none border-b p-4 last:border-b-0 md:rounded-xl md:border md:last:border-b',
|
||||
// B196 — denser vertical rhythm: gap-2.5 between blocks and py-3
|
||||
// (the horizontal p-4 keeps the B184 edge-to-edge bleed). Touch
|
||||
// targets (min-h-11 controls) are untouched.
|
||||
'relative flex flex-col gap-2.5 rounded-none border-b px-4 py-3 last:border-b-0 md:rounded-xl md:border md:last:border-b',
|
||||
isPriority && !isCity && 'border-r-[6px] border-r-primary',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex min-w-0 flex-col gap-0.5">
|
||||
<h3 className="flex items-center gap-1.5 font-medium">
|
||||
<h3 className="flex items-center gap-1.5 text-lg leading-tight font-medium">
|
||||
<Link
|
||||
href={`/campanha/municipios/${municipality.slug}`}
|
||||
className="rounded-md after:absolute after:inset-0 after:rounded-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:after:rounded-xl"
|
||||
|
|
@ -243,13 +265,16 @@ export const MunicipalityMobileCard = ({
|
|||
/>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<TerritorialClassCardReadout municipality={municipality} />
|
||||
{/* B196 (gate B) — every chip is a label-above-value block; the row
|
||||
accepts 1–2 lines, but no chip ever breaks in the middle. */}
|
||||
<div className="flex flex-wrap items-start gap-x-3 gap-y-2">
|
||||
<ChipBlock label="Classe">
|
||||
<TerritorialClassCardReadout municipality={municipality} />
|
||||
</ChipBlock>
|
||||
{isCity ? (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<ChipLabel>Tendência</ChipLabel>
|
||||
<ChipBlock label="Tendência">
|
||||
<Badge variant="outline">Não registrada</Badge>
|
||||
</span>
|
||||
</ChipBlock>
|
||||
) : (
|
||||
<MunicipalityListTrendControl
|
||||
municipalityID={municipality.id}
|
||||
|
|
@ -259,19 +284,20 @@ export const MunicipalityMobileCard = ({
|
|||
variant="sheet"
|
||||
triggerClassName={chipTriggerClassName}
|
||||
trigger={(trend) => (
|
||||
<>
|
||||
<ChipLabel>Tendência</ChipLabel>
|
||||
<ChipBlock label="Tendência">
|
||||
<Badge
|
||||
variant={trend.status ? politicalTrendBadgeVariant[trend.status] : 'outline'}
|
||||
>
|
||||
{trend.status ? politicalTrendLabels[trend.status] : 'Não registrada'}
|
||||
</Badge>
|
||||
</>
|
||||
</ChipBlock>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{isCity ? (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
<ChipBlock label="Nível">
|
||||
<CityDash />
|
||||
</ChipBlock>
|
||||
) : canMoveEngagementLevel ? (
|
||||
<MunicipalityListLevelControl
|
||||
municipalityID={municipality.id}
|
||||
|
|
@ -282,21 +308,19 @@ export const MunicipalityMobileCard = ({
|
|||
variant="sheet"
|
||||
triggerClassName={chipTriggerClassName}
|
||||
trigger={(level, note) => (
|
||||
<>
|
||||
<ChipLabel>Nível</ChipLabel>
|
||||
<ChipBlock label="Nível">
|
||||
<MunicipalityLevelBadge level={level} note={note} layout="table" />
|
||||
</>
|
||||
</ChipBlock>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<ChipLabel>Nível</ChipLabel>
|
||||
<ChipBlock label="Nível">
|
||||
<MunicipalityLevelBadge
|
||||
level={municipality.engagementLevel}
|
||||
note={municipality.levelNote}
|
||||
layout="table"
|
||||
/>
|
||||
</span>
|
||||
</ChipBlock>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -326,7 +350,7 @@ export const MunicipalityMobileCard = ({
|
|||
<MunicipalityAdvisorAvatarStack
|
||||
advisors={advisors}
|
||||
isPriority={isPriority}
|
||||
wrap
|
||||
overlapRow
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,6 @@ export const PeopleFilters = ({
|
|||
id="people-omnibox"
|
||||
label="Filtrar pessoas"
|
||||
placeholder="Buscar pessoa…"
|
||||
edgeToEdge
|
||||
chips={chips}
|
||||
suggestions={suggestions}
|
||||
query={query}
|
||||
|
|
@ -119,9 +118,9 @@ export const PeopleFilters = ({
|
|||
/>
|
||||
</form>
|
||||
{/* C100 mobile spec: "Salvar filtro" lives in the app header as an icon
|
||||
button; the trailing instance is desktop-only (the edge-to-edge
|
||||
omnibox hides its trailing cluster below `md`). Both instances share
|
||||
the same store, and only one is visible per breakpoint. */}
|
||||
button; the trailing cluster is desktop-only below `md` (the omnibox
|
||||
hides its container below the breakpoint). Both instances share the
|
||||
same store, and only one is visible per breakpoint. */}
|
||||
<SetCampaignHeaderAction id="save-people-filter">
|
||||
<SavePeopleFilterControl
|
||||
state={state}
|
||||
|
|
|
|||
|
|
@ -27,13 +27,6 @@ export type CampaignListOmniboxProps = {
|
|||
isPending?: boolean
|
||||
/** Domain controls beside the bar (e.g. save bookmark). */
|
||||
trailing?: ReactNode
|
||||
/**
|
||||
* C100: below `md` the trailing cluster (column picker, save bookmark) is
|
||||
* hidden — B184 already owns the mobile bar chrome (borderless field,
|
||||
* circle-X clear), and the page registers its own header controls instead.
|
||||
* `md:` restores the trailing cluster beside the framed desktop field.
|
||||
*/
|
||||
edgeToEdge?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -47,9 +40,15 @@ export type CampaignListOmniboxProps = {
|
|||
* containing block (its parent), and the form is the only wrapper whose parent
|
||||
* is the full-height `CampaignPageShell` — a sticky input column inside the
|
||||
* short omnibox row would only "stick" for its own height and then scroll away.
|
||||
*
|
||||
* `campaign-list-omnibox-form` is the stable marker `CampaignContentScroll`
|
||||
* matches (`:has()`) to drop its mobile top padding — only a page hosting the
|
||||
* list bar loses the `p-4` top gap, so the sticky's containing block starts at
|
||||
* the scrollport top and the bar glues to the header (B196). Without it the
|
||||
* sticky clamps 16px below the header and cards roll visibly through the gap.
|
||||
*/
|
||||
export const campaignListOmniboxFormClassName =
|
||||
'sticky top-0 z-20 -mx-4 border-b border-border bg-background px-4 py-2 ' +
|
||||
'campaign-list-omnibox-form sticky top-0 z-20 -mx-4 border-b border-border bg-background px-4 py-1 ' +
|
||||
'md:static md:z-auto md:mx-0 md:border-b-0 md:bg-transparent md:px-0 md:py-0'
|
||||
|
||||
/**
|
||||
|
|
@ -83,7 +82,6 @@ export const CampaignListOmnibox = ({
|
|||
onClearAll,
|
||||
isPending = false,
|
||||
trailing,
|
||||
edgeToEdge = false,
|
||||
}: CampaignListOmniboxProps) => {
|
||||
const reactId = useId()
|
||||
const id = idProp ?? `campaign-list-omnibox-${reactId}`
|
||||
|
|
@ -209,11 +207,14 @@ export const CampaignListOmnibox = ({
|
|||
<PopoverAnchor asChild>
|
||||
<div
|
||||
className={cn(
|
||||
// B184: below `md` the field is a borderless sticky bar; the
|
||||
// `md:` variants restore the framed desktop look.
|
||||
'flex min-h-11 w-full flex-wrap items-center gap-1.5 rounded-lg border-0 bg-transparent px-2 py-1.5 shadow-none',
|
||||
'md:border md:border-input md:shadow-xs',
|
||||
'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50',
|
||||
// B184/B196: below `md` the field is a borderless dense bar
|
||||
// (min-h-8, no inner vertical padding → bar ≈ 40px total)
|
||||
// with NO focus ring — the caret is the focus indicator; the
|
||||
// `md:` variants restore the framed desktop field with its
|
||||
// ring/colored border as the focus affordance.
|
||||
'flex min-h-8 w-full flex-wrap items-center gap-1.5 rounded-lg border-0 bg-transparent px-2 py-0 shadow-none',
|
||||
'md:min-h-11 md:border md:border-input md:py-1.5 md:shadow-xs',
|
||||
'md:focus-within:border-ring md:focus-within:ring-3 md:focus-within:ring-ring/50',
|
||||
)}
|
||||
onMouseDown={(event) => {
|
||||
if (event.target === event.currentTarget) inputRef.current?.focus()
|
||||
|
|
@ -280,7 +281,9 @@ export const CampaignListOmnibox = ({
|
|||
type="button"
|
||||
aria-label="Limpar"
|
||||
className={cn(
|
||||
'inline-flex size-11 shrink-0 items-center justify-center rounded-full',
|
||||
// B196 — size-8 keeps the bar at ~40px total; the field
|
||||
// itself is the real touch target (the X lives inside it).
|
||||
'inline-flex size-8 shrink-0 items-center justify-center rounded-full',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
|
||||
'md:hidden',
|
||||
!(hasChips || query.length > 0) && 'invisible pointer-events-none',
|
||||
|
|
@ -298,8 +301,8 @@ export const CampaignListOmnibox = ({
|
|||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<span className="flex size-7 items-center justify-center rounded-full bg-muted text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground">
|
||||
<XIcon className="size-4" aria-hidden />
|
||||
<span className="flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground">
|
||||
<XIcon className="size-3.5" aria-hidden />
|
||||
</span>
|
||||
</button>
|
||||
) : null}
|
||||
|
|
@ -365,12 +368,11 @@ export const CampaignListOmnibox = ({
|
|||
) : null}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'flex shrink-0 flex-wrap items-center gap-2 md:pt-7',
|
||||
edgeToEdge && 'hidden md:flex',
|
||||
)}
|
||||
>
|
||||
{/* C100 — the trailing cluster is desktop-only: below `md` the page
|
||||
registers its own header controls, so the cluster never joins the
|
||||
mobile sticky bar (an empty container would also inflate its height
|
||||
— B196 keeps the bar ≈ 40px). */}
|
||||
<div className="hidden shrink-0 flex-wrap items-center gap-2 md:flex md:pt-7">
|
||||
{trailing}
|
||||
{onClearAll && hasChips ? (
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import type { ReactNode } from 'react'
|
||||
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/Avatar'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { campaignUserInitials } from '@/utilities/campaignUserProfile'
|
||||
|
||||
export type MunicipalityRelationEntry = {
|
||||
|
|
@ -17,29 +16,54 @@ export const MunicipalityRelationAvatarStack = ({
|
|||
entries,
|
||||
emptyState,
|
||||
maxVisible = 3,
|
||||
wrap = false,
|
||||
overlapRow = false,
|
||||
}: {
|
||||
entries: MunicipalityRelationEntry[]
|
||||
emptyState: ReactNode
|
||||
maxVisible?: number
|
||||
/**
|
||||
* B193 — dense card mode: every entry gets its own avatar (no cap) and the
|
||||
* row wraps to the available width instead of overlapping in a fixed stack.
|
||||
* B196 — dense card mode: every entry gets its own avatar (no cap), in ONE
|
||||
* row that never wraps. Each avatar sits centered in a flex-1 cell, so few
|
||||
* entries render apart (cell wider than the avatar) and many overlap
|
||||
* progressively — the overlap is proportional to the count, no avatar is
|
||||
* capped or hidden behind a "…", and the row always fills the group width.
|
||||
*/
|
||||
wrap?: boolean
|
||||
overlapRow?: boolean
|
||||
}) => {
|
||||
if (entries.length === 0) return emptyState
|
||||
|
||||
const visible = wrap ? entries : entries.slice(0, maxVisible)
|
||||
const visible = overlapRow ? entries : entries.slice(0, maxVisible)
|
||||
|
||||
if (overlapRow) {
|
||||
return (
|
||||
// `overflow-hidden` clips the pile at the group's box on extreme counts
|
||||
// (the sr-only names below still list everyone) — no slivers into the
|
||||
// neighbouring group.
|
||||
<div
|
||||
className="flex w-full min-w-0 items-center overflow-hidden"
|
||||
data-view="relation-avatars"
|
||||
>
|
||||
{visible.map((entry) => (
|
||||
<div key={entry.id} className="flex min-w-0 flex-1 justify-center">
|
||||
<Avatar className="size-7 shrink-0 border-0">
|
||||
{/* The full names ride in the sr-only span below (or the trigger's
|
||||
aria-label); initials alone would be announced twice. */}
|
||||
<AvatarFallback aria-hidden="true">
|
||||
{campaignUserInitials(entry.initialsLabel ?? entry.label)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
))}
|
||||
<span className="sr-only">{entries.map((entry) => entry.label).join(', ')}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('flex items-center gap-2', wrap && 'w-full min-w-0 flex-wrap gap-1.5')}>
|
||||
<div className={cn('flex', wrap ? 'flex-wrap gap-1.5' : '-space-x-2')}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex -space-x-2">
|
||||
{visible.map((entry) => (
|
||||
<Avatar
|
||||
key={entry.id}
|
||||
className={cn('size-8 border-2 border-background', wrap && 'size-7 border-0')}
|
||||
>
|
||||
<Avatar key={entry.id} className="size-8 border-2 border-background">
|
||||
{/* The full names ride in the sr-only span below (or the trigger's
|
||||
aria-label); initials alone would be announced twice. */}
|
||||
<AvatarFallback aria-hidden="true">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { isStaffCampaignRole, type CampaignRole } from '@/lib/campaignRoles'
|
|||
export const CampaignContentScroll = ({ children }: { children: ReactNode }) => (
|
||||
<div
|
||||
data-slot="campaign-content-scroll"
|
||||
className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-4 pb-[calc(4rem+env(safe-area-inset-bottom))] md:p-6 md:pb-6 print:h-auto print:overflow-visible print:p-0 [&::-webkit-scrollbar]:hidden [scrollbar-width:none]"
|
||||
className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-4 pb-[calc(4rem+env(safe-area-inset-bottom))] md:p-6 md:pb-6 print:h-auto print:overflow-visible print:p-0 [&::-webkit-scrollbar]:hidden [scrollbar-width:none] max-md:has-[.campaign-list-omnibox-form]:pt-0"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import type { Page } from '@playwright/test'
|
|||
|
||||
import { SUPPORTER_REGISTRATION_CONSENT_KEY } from '../../src/lib/campaignConsentKeys.js'
|
||||
import { fallbackDemandTitle } from '../../src/lib/demandTitle.js'
|
||||
import { hookFilledCreateData } from '../../src/utilities/hookFilledData.js'
|
||||
import {
|
||||
ensureLeasedConsent,
|
||||
SUPPORTER_REGISTRATION_CONSENT_LEASE_KEY,
|
||||
|
|
@ -1140,6 +1141,219 @@ test.describe('Municípios — card denso mobile (B193)', () => {
|
|||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* B196 (2026-08-10): the mobile list bar is a chassis standard for every
|
||||
* list — glued to the app top bar with no gap (the sticky's containing block
|
||||
* starts at the scrollport top via `:has()`), dense (~40px total, no focus
|
||||
* ring below `md`), and the mobile card reads denser: 18px name with the
|
||||
* territory glued, label-above chips (Classe/Tendência/Nível — gate B), and
|
||||
* one overlapping avatar row per relation group (no wrap, no cap, no "…").
|
||||
*/
|
||||
test.describe('Municípios — barra colada e card denso (B196)', () => {
|
||||
test.use({ viewport: { width: 390, height: 844 } })
|
||||
|
||||
const mobileTopBar = (page: Page) => page.locator('[data-slot="campaign-mobile-top-bar"]')
|
||||
const contentScroll = (page: Page) => page.locator('[data-slot="campaign-content-scroll"]')
|
||||
const headerBottom = async (topBar: ReturnType<typeof mobileTopBar>) =>
|
||||
(await topBar.boundingBox())!.y + (await topBar.boundingBox())!.height
|
||||
// `?q=` matches name PREFIXES, so every card is anchored on the
|
||||
// municipality's own name link.
|
||||
const cardFor = (page: Page, name: string) =>
|
||||
page
|
||||
.locator('[data-view="mobile-cards"] article')
|
||||
.filter({ has: page.getByRole('link', { name, exact: true }) })
|
||||
.first()
|
||||
|
||||
test('bar is glued to the header, ~40px tall, no focus ring, nothing passes above on scroll', async ({
|
||||
campaign,
|
||||
page,
|
||||
}) => {
|
||||
const { fixtures } = campaign
|
||||
const coordinator = await fixtures.createCampaignUser('coordinator', {
|
||||
name: fixtures.value('Coordenadora B196 Barra'),
|
||||
})
|
||||
|
||||
await campaign.login(page, coordinator.email!, coordinator.password)
|
||||
await page.goto(`${campaign.baseURL}/campanha/municipios`)
|
||||
// C106 — dynamic pages stream a transient hidden `#S:*` copy of the shell.
|
||||
await page.waitForFunction(() => document.querySelectorAll('div[id^="S:"]').length === 0)
|
||||
|
||||
const topBar = mobileTopBar(page)
|
||||
const omniboxInput = page.getByRole('combobox', { name: 'Filtrar municípios' })
|
||||
const form = omniboxInput.locator('xpath=ancestor::form[1]')
|
||||
const field = omniboxInput.locator('..')
|
||||
await expect(form).toBeVisible()
|
||||
|
||||
// Glued: no gap between the app top bar and the filter bar.
|
||||
await expect.poll(async () => (await form.boundingBox())!.y).toBe(await headerBottom(topBar))
|
||||
|
||||
// Dense: the whole bar stays around 40px (32px field + py + border).
|
||||
await expect.poll(async () => (await form.boundingBox())!.height).toBeLessThanOrEqual(44)
|
||||
|
||||
// No focus ring: the field gains no shadow/border color on focus.
|
||||
const shadowBefore = await field.evaluate((el) => getComputedStyle(el).boxShadow)
|
||||
await omniboxInput.focus()
|
||||
await expect
|
||||
.poll(() => field.evaluate((el) => getComputedStyle(el).boxShadow))
|
||||
.toBe(shadowBefore)
|
||||
|
||||
// Scroll: the bar stays glued to the header — cards roll UNDER the
|
||||
// opaque bar, never above it.
|
||||
await contentScroll(page).evaluate((el) => el.scrollTo(0, el.scrollHeight))
|
||||
await expect.poll(async () => (await form.boundingBox())!.y).toBe(await headerBottom(topBar))
|
||||
await expect.poll(async () => (await form.boundingBox())!.height).toBeLessThanOrEqual(44)
|
||||
})
|
||||
|
||||
test('name is 18px with the territory glued; Classe/Tendência/Nível chips are label-above blocks', async ({
|
||||
campaign,
|
||||
page,
|
||||
}) => {
|
||||
const { fixtures } = campaign
|
||||
const coordinator = await fixtures.createCampaignUser('coordinator', {
|
||||
name: fixtures.value('Coordenadora B196 Card'),
|
||||
})
|
||||
const municipality = await fixtures.claimMunicipality()
|
||||
|
||||
await campaign.login(page, coordinator.email!, coordinator.password)
|
||||
await page.goto(
|
||||
`${campaign.baseURL}/campanha/municipios?q=${encodeURIComponent(municipality.name)}`,
|
||||
)
|
||||
const card = cardFor(page, municipality.name)
|
||||
await expect(card).toBeVisible()
|
||||
|
||||
// Smaller name (18px) with the territory glued right below it.
|
||||
const heading = card.getByRole('heading', { level: 3 })
|
||||
await expect(heading).toHaveCSS('font-size', '18px')
|
||||
const headingBox = (await heading.boundingBox())!
|
||||
const territory = card.locator('h3 + p')
|
||||
const territoryBox = (await territory.boundingBox())!
|
||||
expect(territoryBox.y - headingBox.y - headingBox.height).toBeLessThanOrEqual(6)
|
||||
|
||||
// Every chip is a label-above block: the value renders below the label
|
||||
// (gate B). "Classe" debuts as a label; Tendência/Nível keep theirs.
|
||||
for (const label of ['Classe', 'Tendência', 'Nível']) {
|
||||
const chipLabel = card.getByText(label, { exact: true })
|
||||
await expect(chipLabel).toBeVisible()
|
||||
const labelY = (await chipLabel.boundingBox())!.y
|
||||
const valueY = (await chipLabel.locator('xpath=following-sibling::*[1]').boundingBox())!.y
|
||||
expect(valueY).toBeGreaterThan(labelY)
|
||||
}
|
||||
})
|
||||
|
||||
test('relation groups: one row per group, overlap grows with the count', async ({
|
||||
campaign,
|
||||
page,
|
||||
}) => {
|
||||
const { fixtures } = campaign
|
||||
const coordinator = await fixtures.createCampaignUser('coordinator', {
|
||||
name: fixtures.value('Coordenadora B196 Avatares'),
|
||||
})
|
||||
const fiveAdvisors = await Promise.all(
|
||||
Array.from({ length: 5 }, (_, i) =>
|
||||
fixtures.createCampaignUser('advisor', {
|
||||
name: fixtures.value(`Assessora B196 ${i + 1}`),
|
||||
}),
|
||||
),
|
||||
)
|
||||
const twoAdvisors = await Promise.all(
|
||||
Array.from({ length: 2 }, (_, i) =>
|
||||
fixtures.createCampaignUser('advisor', {
|
||||
name: fixtures.value(`Assessora B196 dois ${i + 1}`),
|
||||
}),
|
||||
),
|
||||
)
|
||||
const crowded = await fixtures.claimMunicipality()
|
||||
const sparse = await fixtures.claimMunicipality()
|
||||
await fixtures.payload.update({
|
||||
collection: 'municipality',
|
||||
id: crowded.id,
|
||||
data: { advisors: fiveAdvisors.map((advisor) => advisor.id) },
|
||||
depth: 0,
|
||||
})
|
||||
await fixtures.payload.update({
|
||||
collection: 'municipality',
|
||||
id: sparse.id,
|
||||
data: { advisors: twoAdvisors.map((advisor) => advisor.id) },
|
||||
depth: 0,
|
||||
})
|
||||
|
||||
await campaign.login(page, coordinator.email!, coordinator.password)
|
||||
|
||||
// Five advisors: all on ONE row, each covering the start of the next —
|
||||
// the overlap is proportional to the count (no wrap, no cap, no "…").
|
||||
await page.goto(`${campaign.baseURL}/campanha/municipios?q=${encodeURIComponent(crowded.name)}`)
|
||||
const crowdedCard = cardFor(page, crowded.name)
|
||||
await expect(crowdedCard).toBeVisible()
|
||||
const crowdedRow = crowdedCard.locator('[data-view="relation-avatars"]').first()
|
||||
await expect(crowdedRow.locator('.size-7')).toHaveCount(5)
|
||||
const crowdedBoxes = await crowdedRow
|
||||
.locator('.size-7')
|
||||
.evaluateAll((avatars) => avatars.map((a) => a.getBoundingClientRect()))
|
||||
expect(new Set(crowdedBoxes.map((box) => Math.round(box.y))).size).toBe(1)
|
||||
for (let i = 1; i < crowdedBoxes.length; i++) {
|
||||
expect(crowdedBoxes[i]!.x).toBeLessThan(crowdedBoxes[i - 1]!.x + crowdedBoxes[i - 1]!.width)
|
||||
}
|
||||
|
||||
// Two advisors: same single row, no overlap (few entries keep apart).
|
||||
await page.goto(`${campaign.baseURL}/campanha/municipios?q=${encodeURIComponent(sparse.name)}`)
|
||||
const sparseCard = cardFor(page, sparse.name)
|
||||
await expect(sparseCard).toBeVisible()
|
||||
const sparseRow = sparseCard.locator('[data-view="relation-avatars"]').first()
|
||||
await expect(sparseRow.locator('.size-7')).toHaveCount(2)
|
||||
const sparseBoxes = await sparseRow
|
||||
.locator('.size-7')
|
||||
.evaluateAll((avatars) => avatars.map((a) => a.getBoundingClientRect()))
|
||||
expect(new Set(sparseBoxes.map((box) => Math.round(box.y))).size).toBe(1)
|
||||
expect(sparseBoxes[1]!.x).toBeGreaterThanOrEqual(sparseBoxes[0]!.x + sparseBoxes[0]!.width)
|
||||
})
|
||||
|
||||
test('chassis elsewhere: the actions row keeps its breathing room and the bar glues on scroll (atividades)', async ({
|
||||
campaign,
|
||||
page,
|
||||
}) => {
|
||||
const { fixtures } = campaign
|
||||
const coordinator = await fixtures.createCampaignUser('coordinator', {
|
||||
name: fixtures.value('Coordenadora B196 Ativ'),
|
||||
})
|
||||
const municipality = await fixtures.claimMunicipality()
|
||||
// Enough rows to make the scrollport scrollable once the top bar takes over.
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await fixtures.payload.create({
|
||||
collection: 'activity',
|
||||
data: hookFilledCreateData<'activity'>({
|
||||
title: `Atividade B196 ${fixtures.value('x')}`,
|
||||
status: 'confirmado',
|
||||
startAt: '2026-09-01T13:00:00.000Z',
|
||||
municipality: municipality.id,
|
||||
responsible: [{ relationTo: 'campaignUser', value: coordinator.id }],
|
||||
}),
|
||||
depth: 0,
|
||||
})
|
||||
}
|
||||
|
||||
await campaign.login(page, coordinator.email!, coordinator.password)
|
||||
await page.goto(`${campaign.baseURL}/campanha/atividades`)
|
||||
|
||||
const topBar = mobileTopBar(page)
|
||||
const omniboxInput = page.getByRole('combobox', { name: 'Filtrar atividades' })
|
||||
const form = omniboxInput.locator('xpath=ancestor::form[1]')
|
||||
await expect(form).toBeVisible()
|
||||
|
||||
// On load the actions row (criar/planejar) breathes ABOVE the bar — the
|
||||
// bar is not glued yet; it glues once the row scrolls away.
|
||||
const headerBottomValue = await headerBottom(topBar)
|
||||
expect((await form.boundingBox())!.y).toBeGreaterThan(headerBottomValue)
|
||||
|
||||
// The scrollport must actually scroll for the sticky to engage.
|
||||
const scrollport = contentScroll(page)
|
||||
await expect
|
||||
.poll(() => scrollport.evaluate((el) => el.scrollHeight - el.clientHeight))
|
||||
.toBeGreaterThan(0)
|
||||
await scrollport.evaluate((el) => el.scrollTo(0, el.scrollHeight))
|
||||
await expect.poll(async () => (await form.boundingBox())!.y).toBe(headerBottomValue)
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* B126: FAB quick-actions overlay — no persistent drawer; opens on demand.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue