# Botões do menu suspenso do usuário estão quebrando

**URL:** https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011
**Category:** UX
**Created:** [Maio 27, 2020, 7:26pm UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011 "2020-05-27T19:26:56Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [Maio 27, 2020, 7:26pm UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/1 "2020-05-27T19:26:56Z")

</div>

Acabei de notar que esses botões estão quebrando para mim no meta e na revisão:

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/0/6030e861346981cc718a24b420efab1cc8c5763e.png)

(Chromium no Linux)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Maio 28, 2020, 3:07am UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/2 "2020-05-28T03:07:18Z")

</div>

Talvez algo para o @awesomerobot verificar amanhã?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Maio 28, 2020, 10:44pm UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/3 "2020-05-28T22:44:40Z")

</div>

Não consigo reproduzir isso no Windows/MacOS… Suspeito que a adição da barra de rolagem esteja afetando a largura… então reduzi um pouco a largura máxima do nome de usuário e removi alguns pixels de padding.

> <https://github.com/discourse/discourse/commit/c7d75bc3a0ff6f9052f4cfe3654ab4afe160cf12>

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [Maio 29, 2020, 12:50am UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/4 "2020-05-29T00:50:13Z")

</div>

Após algumas investigações, o culpado é este (nas configurações do Chromium)

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/c/fc74debfec35e98538bd8802bad95e6d1dcdb90f.png)

independentemente do nível de zoom

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Maio 29, 2020, 1:07am UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/5 "2020-05-29T01:07:09Z")

</div>

oohh isso é útil, acho que consigo uma correção melhor para isso

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Maio 30, 2020, 1:08am UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/6 "2020-05-30T01:08:49Z")

</div>

ok, essa é uma boa correção! Consegui remover algumas larguras fixas daquela área do menu, então agora podemos lidar melhor com situações em que há muito conteúdo ali.

No layout flex, estou priorizando espaço para os ícones, então eles nunca devem quebrar de linha e, em vez disso, truncarão mais o nome de usuário conforme necessário. Por outro lado, isso também significa que lidamos melhor com o truncamento do nome de usuário em geral, então nomes longos também serão truncados _menos_ do que antes (quando há mais espaço disponível no tamanho padrão da fonte)…

> <https://github.com/discourse/discourse/commit/32e40ea1337150f271761179178d5e8a1d52cf42>

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [Maio 30, 2020, 1:45am UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/7 "2020-05-30T01:45:38Z")

</div>

Ah, muito melhor! Super, até mesmo:

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/a/7a2dcb29b2093fdf1a8cb9e763a7dbb3b75a221b.png)

🤗

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [Maio 30, 2020, 1:47am UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/8 "2020-05-30T01:47:56Z")

</div>

Você pode fazer a mesma mágica no menu 🔧?

Médio:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/9/09e49c0a9c5473a4fc7055000c501e8939d3927a.png)

vs Grande:

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/8/d842b59b5b4b0130b6778ae7ae0d09f63eee5f35.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Junho 2, 2020, 9:15pm UTC](https://meta.discourse.org/t/user-dropdown-buttons-are-wrapping/153011/10 "2020-06-02T21:15:49Z")

</div>

Isso deve resolver o problema, é um caso semelhante… tínhamos uma largura fixa ali. Agora, ele deve se ajustar melhor às alterações no tamanho da fonte:

> <https://github.com/discourse/discourse/commit/688d9428fe9cb2d96d1742cb6d09efd45776b073>
