Merge pull request #706 from fsolla/plans/plan-issue-39

docs(plans): B200 — Municípios mobile: encaixes dos cards (densidade, labels, avatares)
This commit is contained in:
Francisco Solla 2026-08-11 23:42:01 +00:00 committed by GitHub
commit e3ffb9d8a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 601 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

View file

@ -0,0 +1,520 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>UI draft — Municípios mobile: encaixes dos cards (pós-B196)</title>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<main class="mx-auto max-w-5xl p-8">
<p class="text-sm text-zinc-400">
Coordenação/assessoria no celular varrendo /campanha/municipios — densidade dos cards,
alinhamento das labels e comportamento dos avatares. Cenas mobile 390px (sucessor de B196).
</p>
<!-- ============ CENA: ATUAL (referência) ============ -->
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
Atual (referência — 390px)
</h2>
<section
data-shot="atual"
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
>
<!-- header do app (56px) + barra de filtro 40px colada -->
<div
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
>
<p class="text-sm font-semibold">Municípios</p>
<span
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
>SR</span
>
</div>
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 py-1">
<div class="flex min-h-8 flex-1 items-center gap-1.5 rounded-lg px-2">
<input
class="min-h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
placeholder="Digite para filtrar (município, território, cenário…)"
/>
<span
class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
>✕</span
>
</div>
</div>
<!-- CARD 1 — gaps grandes + 2 avatares "um em cada canto" + avatares centrados -->
<article class="flex flex-col gap-2.5 border-b border-zinc-800 px-4 py-3">
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-col gap-0.5">
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
<p class="text-sm text-zinc-400">
Território de Identidade Chapada Diamantina · ZE 45
</p>
</div>
<div class="shrink-0 text-right">
<p class="text-sm font-medium">12,4%</p>
<p class="text-xs text-zinc-500">4º</p>
</div>
</div>
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
</div>
<div class="flex flex-wrap items-start gap-x-3 gap-y-2">
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Classe</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Reduto 8,2×</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Tendência</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Alta</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Nível</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N2</span>
</div>
</div>
<div class="flex flex-wrap items-start gap-3">
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1.5">
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>JM</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>AP</span
>
</div>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1.5">
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>CR</span
>
</div>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1.5">
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
</div>
</div>
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
Última atualização há 2 dias
<span class="text-xs">▾</span>
</div>
</article>
<!-- CARD 2 — 5 avatares: pontas cortadas pelo overflow-hidden -->
<article class="flex flex-col gap-2.5 px-4 py-3">
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-col gap-0.5">
<h3 class="text-lg leading-tight font-medium">Adustina</h3>
<p class="text-sm text-zinc-400">Território de Identidade Nordeste · ZE 62</p>
</div>
<div class="shrink-0 text-right">
<p class="text-sm font-medium">7,1%</p>
<p class="text-xs text-zinc-500">18º</p>
</div>
</div>
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
</div>
<div class="flex flex-wrap items-start gap-x-3 gap-y-2">
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Classe</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Solo 1,1×</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Tendência</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Em disputa</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Nível</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N3</span>
</div>
</div>
<div class="flex flex-wrap items-start gap-3">
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1.5">
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>JM</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>AP</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>CR</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>LS</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1.5">
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>FT</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>DA</span
>
</div>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1.5">
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
<span class="text-sm text-zinc-500">—</span>
</div>
</div>
</div>
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
Última atualização há 1 dia
<span class="text-xs">▾</span>
</div>
</article>
</section>
<!-- ============ CENA: PROPOSTO ============ -->
<h2 class="mt-10 text-sm font-semibold uppercase tracking-wide text-zinc-500">
Proposto (390px)
</h2>
<section
data-shot="proposto"
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
>
<!-- header + barra de filtro mais alta (≈48px), sem pb → 1º card colado -->
<div
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
>
<p class="text-sm font-semibold">Municípios</p>
<span
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
>SR</span
>
</div>
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 pt-1 pb-0">
<div class="flex min-h-10 flex-1 items-center gap-1.5 rounded-lg px-2">
<input
class="min-h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
placeholder="Digite para filtrar (município, território, cenário…)"
/>
<span
class="flex size-9 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
>✕</span
>
</div>
</div>
<!-- CARD 1 — nome/território colados, ritmo vertical enxuto, labels+valores à esquerda, avatares sobrepostos à esquerda -->
<article class="flex flex-col gap-2 border-b border-zinc-800 px-4 py-3">
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-col gap-0">
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
<p class="text-sm leading-tight text-zinc-400">
Território de Identidade Chapada Diamantina · ZE 45
</p>
</div>
<div class="shrink-0 text-right">
<p class="text-sm font-medium">12,4%</p>
<p class="text-xs text-zinc-500">4º</p>
</div>
</div>
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
</div>
<div class="flex flex-wrap items-start gap-x-3 gap-y-1.5">
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Classe</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Reduto 8,2×</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Tendência</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Alta</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Nível</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N2</span>
</div>
</div>
<div class="flex flex-wrap items-start gap-3">
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>JM</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>AP</span
>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>CR</span
>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
<div class="flex w-full min-w-0 items-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
</div>
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
Última atualização há 2 dias
<span class="text-xs">▾</span>
</div>
</article>
<!-- CARD 2 — 5 e 6 avatares: todos visíveis, sobreposição cresce, nada cortado -->
<article class="flex flex-col gap-2 border-b border-zinc-800 px-4 py-3">
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-col gap-0">
<h3 class="text-lg leading-tight font-medium">Adustina</h3>
<p class="text-sm leading-tight text-zinc-400">
Território de Identidade Nordeste · ZE 62
</p>
</div>
<div class="shrink-0 text-right">
<p class="text-sm font-medium">7,1%</p>
<p class="text-xs text-zinc-500">18º</p>
</div>
</div>
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
</div>
<div class="flex flex-wrap items-start gap-x-3 gap-y-1.5">
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Classe</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Solo 1,1×</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Tendência</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Em disputa</span>
</div>
<div class="flex flex-col gap-0.5">
<span class="text-xs font-medium text-zinc-500">Nível</span>
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N3</span>
</div>
</div>
<div class="flex flex-wrap items-start gap-3">
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>JM</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>AP</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>CR</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>LS</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>FT</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>DA</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>MB</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>TC</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>VL</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>PN</span
>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
<div class="flex w-full min-w-0 items-center">
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>RS</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>TB</span
>
</div>
</div>
</div>
</div>
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
Última atualização há 1 dia
<span class="text-xs">▾</span>
</div>
</article>
</section>
</main>
</body>
</html>

View file

@ -0,0 +1,81 @@
# Municípios mobile: encaixes dos cards — densidade, alinhamento e avatares (pós-B196)
Status: rascunho
Atualizado em: 2026-08-11
Issue: #704
Priority: P2
Model: composer-2.5
Impeccable: B — encaixe na tela existente `/campanha/municipios` (mobile < md), sem rota nova
Rascunho UI: docs/plans/municipios-mobile-ajustes-cards-ui-draft.html (PNGs embutidos abaixo)
Appetite: ~0,5–1 dia eng; um encaixe de densidade/alinhamento em superfície já entregue
Responsável: —
## Intenção
O B196 densificou o card mobile de `/campanha/municipios`, mas a varredura no celular ainda tropeça em arestas finas: a barra de filtro fica baixa para tocar e há um vão entre ela e o primeiro card; nome e território do município ainda respiram demais entre si e entre o bloco de votos estimados; as labels dos blocos (Classe, Tendência, Nível, Assessores, Lideranças, Dobradinhas) e seus valores não lêem como uma coluna alinhada à esquerda; e os avatares — que deveriam ser um grupo sobreposto à esquerda — ficam espalhados (dois avatares saem "um em cada canto") ou têm as pontas cortadas quando passam de 4. Queremos o card lendo como um bloco só: colado à barra, com ritmo vertical enxuto e os avatares sempre agrupados à esquerda, sobrepostos e inteiros.
## Persona e fluxo
- **Persona / contexto:** coordenador(a) e assessores(as) no celular, no campo ou entre reuniões; varredura rápida da lista para priorizar municípios.
- **Job principal:** ler nome/território e sinais (votos, tendência, nível, rede) de uma olhada, sem tropeçar em vãos ou em avatares cortados/espalhados.
- **Fluxo desejado:** abre a lista → barra de filtro um pouco mais alta, confortável para tocar → primeiro card começa colado na barra → cada card lê como um bloco: nome com território colado, ritmo vertical enxuto entre votos/chips/avatares, labels e valores alinhados à esquerda, avatares agrupados e sobrepostos à esquerda (nunca cortados) → toca qualquer dado e edita no sheet (inalterado).
- **Anti-goals de produto:** não mexer nos edit-where-you-see (sheets) nem no que cada controle edita; não mudar labels/dados dos chips; não tocar o desktop (`md+`); não esconder pessoas atrás de "…" (continua valendo o anti-goal B196 de não limitar avatares).
### Rascunho UI (B)
![Rascunho UI — estado atual (referência)](municipios-mobile-ajustes-cards-ui-draft-atual.png)
![Rascunho UI — proposto](municipios-mobile-ajustes-cards-ui-draft-proposto.png)
## Objetivo e aceite
- Barra de filtro mobile visivelmente um pouco mais alta que hoje (≈40px → ≈48px no total da barra), sem voltar o anel vermelho de foco nem o campo alto do B184.
- Primeiro card começa encostado na barra de filtro (sem vão entre o topo do card e a barra); demais cards mantêm o ritmo atual.
- Nome do município e território colados verticalmente (vão ≈0–2px, sem sobrepor).
- Vão entre o bloco nome/território e a barra de votos estimados reduzido; vão entre a barra de votos e a linha Classe/Tendência/Nível reduzido; vão entre a linha Classe/Tendência/Nível e a linha Assessores/Lideranças/Dobradinhas reduzido — sem encolher área de toque dos controles (min 44px dos triggers de chip/sheet permanece).
- Labels e valores dos seis blocos (Classe, Tendência, Nível, Assessores, Lideranças, Dobradinhas) alinhados à esquerda: cada label e seu valor começam no mesmo eixo; nenhum valor (especialmente avatares) fica centralizado ou espalhado sob a label.
- Avatares sempre agrupados à esquerda do bloco e com sobreposição mínima garantida (ex.: dois avatares ligeiramente sobrepostos, não um em cada canto).
- Nenhum avatar cortado na borda do bloco, qualquer que seja a quantidade (ex.: 5–6 avatares todos visíveis; a sobreposição pode crescer com a quantidade, desde que nada invada o grupo vizinho).
## Dados (intenção)
- **Vou apresentar dados?** Não — sem métrica nova; é densidade e alinhamento da superfície existente.
- **Decisões desbloqueadas:** nenhuma leitura nova de dado. Guardrail: nomes/iniciais dos avatares continuam acessíveis (sr-only) e os chips mantêm os valores atuais.
## Direção no codebase (hipótese)
- **Áreas prováveis:**
- Omnibox (chassis compartilhado): `src/components/campaign/shared/CampaignListOmnibox.tsx` — campo mobile `min-h-8`/`size-8` (barra ≈40px; subir ~8px sem inflar), e o `campaignListOmniboxFormClassName` (`py-1` — o pb de 4px é o vão atual entre a barra e o primeiro card).
- Card mobile: `src/components/campaign/municipality/MunicipalityMobileCard.tsx` — ritmo vertical `gap-2.5` entre blocos, `gap-0.5` entre nome/território, labels via `ChipLabel`/`ChipBlock`.
- Avatares: `src/components/campaign/shared/MunicipalityRelationAvatarStack.tsx` (modo `overlapRow` do B196 — células `flex-1 justify-center` com `overflow-hidden`; é isso que espalha 2 avatares e corta as pontas com 5+).
- **Precedente a olhar:** plano pai `docs/plans/municipios-mobile-polimento-omnibox-cards.md` (B196, #607) e `docs/plans/municipios-card-mobile-edit-where-you-see.md` (B193); desktop usa `-space-x-2` com cap 3 em `MunicipalityList.tsx`.
- **Risco de acoplamento:** o omnibox é chassis de TODAS as listas — mexer na altura da barra muda as outras listas de uma vez (padrão já aceito no B196: "vale para todas"). O avatar stack `overlapRow` só é usado pelo card mobile; o modo com cap do desktop não deve mudar.
## Dependências
- Nenhuma (sucessor de B196, já em produção). Soft: manter o padrão visual do desktop intacto.
## Fora de escopo
- Desktop (`md+`) da lista de municípios e das demais listas.
- Comportamento de edição (sheets/edit-where-you-see), ferramentas de busca/sugestões do omnibox, labels/dados dos chips.
- Outras superfícies mobile (feed de atualizações, agenda…) — só o que o chassis compartilhado carregar.
- Limite de avatares com "…" (anti-goal B196 continua valendo).
## Rabbit holes de produto
- **"Já que vai mexer no omnibox, ajusta as outras listas também."** O pedido é altura + vão do primeiro card; o chassis leva isso para todas as listas por padrão (como no B196). **Corte:** nada além do chassis e do card de municípios; o resto vira item separado.
- **Sistema de avatares para o app inteiro.** O pedido é sobre os três grupos do card mobile. **Corte:** só o card; o modo desktop (cap 3 + tooltip) permanece.
- **"Aproveitar e polir" mais a tela.** A lista mobile ainda tem outras arestas. **Corte:** somente os pontos do aceite; o resto vira item separado.
## Questões em aberto (produto)
- **Com 6+ avatares num bloco de ~110px, o que vence: sobreposição mais profunda ou avatar menor?** **Opções:** A — sobreposição cresce com a quantidade (todos visíveis, tamanho fixo); B — avatar encolhe a partir de um limite (tamanho variável). **Recomendação:** A — preserva a leitura de "pilha de pessoas" e não muda o toque; o caso extremo (7+) é raro e a sobreposição de ~14px ainda lê como grupo. _(assumido — validar no gate)_
- **A barra mais alta vale para todas as listas?** O omnibox é chassis compartilhado. **Recomendação:** A — vale para todas (mesmo padrão do B196); é a área de toque que melhora. _(assumido — validar no gate)_
## Referências
- GitHub Issue: #704 (registrada 2026-08-11, blocked até o plano em main)
- Rascunho UI (gate): `docs/plans/municipios-mobile-ajustes-cards-ui-draft.html` + PNGs embutidos acima
- Pai: `docs/plans/municipios-mobile-polimento-omnibox-cards.md` (B196, #607) · `docs/plans/municipios-card-mobile-edit-where-you-see.md` (B193, #576) · `docs/plans/municipios-mobile-sem-moldura.md` (B184)
- Arquivos a abrir primeiro: `src/components/campaign/shared/CampaignListOmnibox.tsx` · `src/components/campaign/municipality/MunicipalityMobileCard.tsx` · `src/components/campaign/shared/MunicipalityRelationAvatarStack.tsx`