Minor UI mismatches in user-menu-billing button

image

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.

1 Like

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.

3 Likes

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 >﹏<).

2 Likes

Thanks again @small-lovely-cat , I’ve approved and merged the PR :slight_smile:

2 Likes