Text Alignment Issue in Hindi Language

[RamGoel]

Details about the bug:

• Web browser and version: 110.0.5481.178 (Official Build) (64-bit) (cohort: Stable)
• Operating System: Windows 10 Version 2004 (Build 19041.1415)
• Steps to reproduce this:

1. Go to https://editor.p5js.org/
2. Switch Language to हिंदी
3. Then click on Settings Icon (Top-right corner)
4. You will see that the text alignment appears broken (it means autosave in English)
5. Image for Reference
   

The reason is that the text above this, "decrease font size" which means (कम करें) in hindi, is overflowing to next row.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[lindapaiste]

I'm not actually seeing the behavior that you are describing in my browser. For me it looks like:

However I can force it into the "bad" state by changing the .preference__label style from font-size: .75rem to font-size: 1.25rem.

With this, I can see that the line-height is very high! It has a line-height: 3.33333rem inherited from .contrast .preference__minus-button. This is weird to me and is something that might need rethinking, but the current style is built around this line-height, so the easier solution is to keep the text on one line and then the spacing doesn't matter.

Adding white-space: nowrap; to the .preference__label class will force it to stay on one line. The default value for overflow is visible so it will extend outside of the specified width.

Just a note that this opens the possibility of a horizontal collision if the text is excessively long. What I mean is this:

However it's still a huge improvement over the current behavior, where the words are on separate very-tall lines:

[KrishavRajSingh]

is this open?
I am not able to reproduce

[mallikaakash]

This issue is not reproducible, even when checked responsively. The issue has been resolved.