Flexboxes meet soft wrap

Inspecting the CSS, we can see that the dropdown row in the settings panel consist of a flex box row, with the label having flex: 0; and the control has flex: 1;. The former sets the label to take as few space as possible, while the latter latter sets the control to take as much space as possible.

When the layout engine tries to compute what is the least space the text label can take, it would try to find out the width of the text content where all soft wrap opportunities are taken. For most alphabetic languages, this would be equivalent of the width of the longest word. In the case of English, the label is just the word “Theme”, so the layout engine would happily just take the width of the word and call it a day. The label would take the same size no matter it is set for the minimum or the maximum content width. This is the case for most languages, since “Theme” would translate into one word for most languages.

However, for cases where it translates into two words (like Vietnamese and Hebrew), and the case for CJK, things start to change.

For translations with more than one word, the soft break would happen at the word boundary, so the layout engine will proactively wrap the label into multiple lines despite there are actually free spaces for the label before being taken by the control.

For CJK languages, the soft wrap opportunity would occur between almost every pair of neighboring characters. So the string “佈景主題” would be wrapped into 4 lines according to the rule, essentially making it as if it is written vertically. (Though actual proper vertical writing would involve more changes than just inserting line breaks.) This would end up making the UI distorted, where the label designed to go left to right, ended up perceived to be top to bottom, adding unintentional whitespaces.