Fundações

Medidas do cartão

O cartão da agenda não tem dois arranjos, tem quatro, e troca de arranjo por ALTURA. As três fronteiras e a caixa que as produz saíram do DOM do Google Calendar, com um compromisso de cada lado de cada fronteira. Esta página desenha a escada com o componente de verdade.

lib/agenda/cartao.tscomponents/agenda/cartao-na-grade.tsx26 cartões medidos28/08/2026

A caixa

Tudo depende dela. A entrelinha fixa de 15px é o que faz as fronteiras caírem em números redondos, e é por isso que o corpo pode encolher para 11px sem mover fronteira nenhuma.

Medida	Valor	Observação
Corpo do texto	12px nas duas linhas	só o peso muda: 500 no nome, 400 no apoio
Entrelinha	15px cravados	valor fixo, não um fator do corpo
Recuo à esquerda	8px	sempre, nos dois arranjos
Recuo no topo	4px	só quando empilha; na linha única o texto centraliza
Recuo à direita	8px	só na linha única; empilhado corre até a borda
Recuo embaixo	nenhum	a sobra fica vazia, o texto não centraliza
Canto	6px	o token --radius-evt, medido no pixel
Folga entre cartões	2px	o cartão vale a fatia menos isto

Uma linha centraliza, duas ou mais colam no topo

É a única troca de alinhamento do cartão. Com uma linha só, o texto fica no meio da altura; a partir de duas, começa no topo e a sobra de baixo fica vazia.

components/agenda/cartao-na-grade.tsx

className={cn(
  "relative flex h-[calc(100%-2px)] w-full flex-col overflow-hidden rounded-evt pl-2 text-left text-[12px] leading-[15px]",
  alturaCartao < ALTURA_COM_APOIO
    ? "justify-center py-0 pr-2"
    : "justify-start pt-1 pb-0",
  ehMiniatura(alturaCartao) && "text-[11px]",
)}

A escada, com cartões de verdade

Cada coluna é um compromisso real de uma duração real, na densidade da Semana (48 px por hora). O que muda entre uma coluna e a seguinte é só a altura.

10px15 min · fatia 121 linha

14px20 min · fatia 161 linha

17px23 min · fatia 191 linha

18px25 min · fatia 201 linha

22px30 min · fatia 241 linha

34px45 min · fatia 362 linhas

46px1 h · fatia 482 linhas

49px1 h 04 · fatia 513 linhas

94px2 h · fatia 963 linhas

Os cartões abaixo são o componente da grade, com as mesmas classes e as mesmas constantes. Se alguém mexer na caixa, esta escada muda junto e a página continua verdadeira.

Altura do cartão	Arranjo	Prova
menor que 18px	uma linha, corpo 11px	17px ainda encolhe, 18px já não
18 a 33px	uma linha, corpo 12px	nome, vírgula e hora na mesma frase
34 a 48px	duas linhas	33px ainda é uma linha, 34px já são duas
49px ou mais	três linhas	48px ainda são duas, 49px já são três

A conta

Uma conta só rege as duas fronteiras de baixo: tira o recuo do topo e vê quantas faixas de entrelinha sobram. As fronteiras de 34 e 49 são essa conta com dois e com três.

lib/agenda/cartao.ts

export const ALTURA_COM_APOIO = RECUO_DO_TOPO + ALTURA_DA_LINHA * 2;
export const ALTURA_COM_TERCEIRA = RECUO_DO_TOPO + ALTURA_DA_LINHA * 3;

A fronteira de 18px, a do corpo em 11px, não sai dessa conta. É constante própria, cercada por medição: um cartão de 17px ainda escreve em 11px e um de 18px já escreve em 12px.

Fatia não é cartão

A armadilha que custou dois pixels e cortou a segunda linha antes de alguém notar.

Armadilha já pagaPerguntar à fatia adianta o corte em 2px

A régua devolve a altura da FATIA. O botão é h-[calc(100%-2px)], então o cartão vale sempre a fatia menos a folga. Quem decide quantas linhas cabem tem que perguntar ao cartão: com o limiar aplicado à fatia, um compromisso de 34px de fatia pede duas linhas com 32px de espaço, e a segunda nasce cortada.

Os 34 do Google já são medida de cartão: lá o compromisso de 45 min ocupa 36px de fatia e o cartão sai com 34. Por isso existe alturaDoCartao, e por isso ela tem teste com controle negativo.

Vale para as três leituras: o cartão parado, o fantasma do arrasto e o rascunho de criação. Os três desenham a mesma caixa, e os três perguntam ao cartão. O bloqueio paga mais dois, porque só ele tem borda.

O passado apaga as duas linhas

O fundo continua cheio e a tarja do profissional também. O que recua é o bloco de texto inteiro, nome junto.

futuro

passado

À esquerda o compromisso futuro, à direita o mesmo depois que a hora passou. O fundo troca de receita e as duas linhas caem a meio tom.

Armadilha já pagaOpacidade é multiplicativa, e mente na leitura

A medição anterior dizia nome em tinta cheia e hora a meio tom. Era leitura de ancestral errado: o nome mora num span com opacity: 1 dentro de uma linha com opacity: .5, e o 1 do filho compõe sobre o 0,5 do pai. As duas linhas renderizam a 50%. É a mesma armadilha do número do mini calendário, que reporta 13,33px no botão e 10px no elemento que de fato pinta.

app/globals.css

.evt-passado .evt-primaria,
.evt-passado .evt-secundaria {
  opacity: 0.5;
}

Nos temas escuros

Graphite · data-theme="graphite"

Forest · data-theme="forest"

Slate · data-theme="slate"

Corta seco, sem reticências

O nome que não cabe é cortado no meio da palavra. Não é descuido: é a regra, e vale no cartão, no fantasma e no rascunho.

A palavra some na borda sem aviso tipográfico. Reticências gastariam três caracteres de um cartão que já tem pouco, e o que interessa num nome comprido são as primeiras letras.

A receita é overflow: hidden com text-overflow: clip e white-space: nowrap, e não o truncate do Tailwind, que traz reticências junto.

A faixa de dia todo é outro componente

Altura fixa, entrelinha maior, peso 500 e recuo dos dois lados. Confundi-la com o cartão da grade é o começo de todo erro de medida nesta tela.

A pílula tem 22px sempre, não importa a duração. O cartão da grade tem altura variável e entrelinha de 15.

Medida	Faixa de dia todo	Cartão da grade
Altura	22px fixos	a fatia menos a folga
Entrelinha	20px	15px
Peso	500	500 no nome, 400 no apoio
Recuo	8px dos dois lados	8px à esquerda, 4px no topo

Medido e ainda sem uso

Duas coisas saíram da medição, estão no código como constante testada e não têm consumidor. Ficam anotadas para não serem re-descobertas.

O que	Onde para	Por quê
Terceira linha a 49px	constante ALTURA_COM_TERCEIRA, sob teste	a grade não tem um terceiro campo para escrever
Hora antes do nome, no Mês	sem consumidor	a visão Mês desenha contador por dia, não pílula de compromisso

No Google, a terceira linha não é só mais uma linha: é onde o cartão passa a escrever a faixa inteira de horário, com início e fim. Abaixo dela ele escreve só a hora de início. Se a grade ganhar um terceiro campo, a regra já está medida.