O tamanho do botão de resposta é influenciado pela preferência de tamanho do texto

Continuando a discussão de Novos controles de tópico no Meta:

Acho que uma parte de

tornar todos os botões do mesmo tamanho de fonte

não funciona em todos os casos.

Escolhi um tamanho de texto menor em minhas preferências e isso parece influenciar o tamanho do botão de resposta. Ele é menor que os outros botões. Curiosamente, ele não aumenta quando escolho um tamanho de fonte maior.

6 curtidas

Eu tenho meu tamanho em normal e também vejo este problema.

1 curtida

Olá @Moin, obrigado por relatar, nosso designer está ciente, mas ainda não encontrou uma solução, alguma ideia de como poderíamos resolver?

Isso fica na parte inferior dos tópicos no celular?
Talvez seja influenciado pelo tamanho do texto “Responder” no desktop/tablet, que não é visível no celular

Acho que o botão de resposta tem o tamanho certo e os botões à esquerda não.

Ao contrário dos outros botões na área .topic-footer-main-buttons, o botão de notificações do tópico é envolvido por uma div (.topic-notifications-button).

Todos os botões na área, incluindo o botão de resposta (código simplificado):

<button></button>

Botão de notificações (código simplificado):

<div class="topic-notifications-button">
  <button></button>
</div>

O problema é que, devido a esta linha,

A propriedade font-size: var(--font-up-1) é aplicada tanto ao contêiner do botão de notificações quanto ao botão interno.
Como você sabe, valores em se multiplicam incrementalmente do pai para o filho.

O resultado pode ser ilustrado como:

<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

1.15 × 1.15 é o problema. O valor final de font-size no elemento button de notificações é maior do que o esperado.

Não é óbvio à primeira vista porque os botões irmãos (chave de fenda, compartilhar, marcador, etc.) ajustam sua altura ao elemento mais alto na mesma linha[1], então o botão de notificações do tópico não se destaca como “muito alto”, já que todos os botões neste contêiner têm a mesma altura.

Remover a linha destacada no onebox do GitHub acima deve resolver o problema:


  1. Isso pode ser ilustrado se adicionarmos alguns botões adicionais no contêiner para que o conteúdo quebre a linha:



    Os botões na primeira linha recebem a altura esperada.

    No entanto, o botão de notificações, maior do que o esperado devido à multiplicação de em, faz com que o botão adjacente na mesma linha aumente automaticamente de altura. ↩︎

7 curtidas

Muito obrigado pela depuração, estou passando isso para nossos designers :hugs:

3 curtidas

Eu sabia que era o botão de notificação que estava causando o problema, mas ainda não o havia identificado, então; droga, essa é uma boa descoberta! Eu meio que ignorei os duplos ems sendo aplicados ali! Ainda não verifiquei, mas é muito provável que seja o caso.

Obrigado! :clap:

6 curtidas

Isso deve ser corrigido (PR)

2 curtidas

Em tópicos fixados como Share your feedback about the 🆕 iOS Discourse Hub app, o botão de resposta ainda é menor

2 curtidas

O texto invisível \u0026ZeroWidthSpace; ao lado do ícone svg no kit de seleção :pushpin: aumenta a altura do botão. Qualquer texto em qualquer botão aumenta sua altura de forma semelhante (e os botões irmãos ajustam sua altura de acordo, como o comportamento discutido acima).

Sim, isso é algo para o qual abrirei um tópico interno. Não tenho certeza se o &ZeroWidthSpace; estar causando problemas é devido às minhas alterações, ou se sempre foi o caso e apenas notamos agora nesta configuração.

1 curtida

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