A user, small-lovely-cat, noticed a UI inconsistency where the ‘Billing’ button in the user menu displays both an icon and text, while other buttons only show icons. They proposed a PR to remove the text from the ‘Billing’ button. kelv explained that the text should not be removed entirely, as it would cause issues on wider viewports where other icons have accompanying text. Instead, the problem was due to a missing span element around the internationalized text in the Billing component. small-lovely-cat updated the PR to fix this issue, and kelv approved and merged the updated PR.
Seen from the screenshot, all of the other buttons except “Billing” only includes a svg icon without words, but Billing does, it causes a visual mismatch.
Is it better to remove the words? I think the icon is enough.
A PR to remove this is here.
https://github.com/discourse/discourse/pull/35199
Great catch, thanks for raising this issue @small-lovely-cat! I can see it looks rather jarring to have only 1 icon accompanied with words on your UI.
From what I can tell on my end, this is probably happening when the viewport gets too narrow, and we apply some styles to make those text elements not display on the page:
The Billing component that you’ve updated in your PR is missing the span element around the internationalized text. We should add that, and it should be sufficient for handling this case. We wouldn’t want to remove the text entirely otherwise we would run into the issue of that icon missing text while all other icons have accompanying texts in wider viewports.
ok, thank you for your quick reply~
A fixed PR version is here, and the older one is closed(github failed to let me merge that ＞﹏＜).
Thanks again @small-lovely-cat , I’ve approved and merged the PR 
This topic was automatically closed after 18 hours. New replies are no longer allowed.