Imagens em lightboxes não têm `vertical-align` definido, desalinhando-as com `img`s normais

Prioridade/Gravidade: Baixa.
Plataforma: Confirmado no Firefox 127.0 no Windows 10 e no Chrome 125.0.6422.165 no Android 14.
Descrição: Veja abaixo.
Passos para reproduzir: Coloque duas imagens, uma com resolução acima de 690×500 pixels (em qualquer dimensão) e outra com resolução abaixo, na mesma linha.


Comportamento esperado

Imagens em lightbox e imgs “nuas” devem ser tratadas da mesma forma pelo CSS, desconsiderando todos os recursos extras de um lightbox.

O problema

O CSS integrado do Discourse tem vertical-align: middle definido para img, mas não para .lightbox-wrapper, resultando em imagens em lightbox e fora de lightbox na mesma linha desalinhadas e ocupando espaço vertical desnecessário:

A solução

A correção é simples: adicione vertical-align: middle também a .lightbox-wrapper.

4 curtidas

Obrigado pelo relatório detalhado! Uma correção foi aplicada aqui:

e estará disponível nas atualizações do Discourse em breve.

4 curtidas

Maravilha! Muito obrigado! :blush:

1 curtida

Este tópico foi fechado automaticamente após 3 dias. Novas respostas não são mais permitidas.