Scratch-gui: Brokenness in nav bar in にほんご language

[fsih]

Expected Behavior

Text in navigation bar is in navigation bar

Actual Behavior

Text is vertical

Steps to Reproduce

1. Switch language to にほんご
2. Text begins to escape the navigation bar when Chrome is at 1222px across

Operating System and Browser

Windows 10 Chrome

[Kenny2github]

I cannot reproduce this on develop, Windows 10.0.17134.165, Chrome 67.0.3396.99

[apple502j]

Cannot repro on develop, Windows 7 HomePremium 64bit SP1, Firefox 61.0.1

[kyleplo]

Cannot repro on Chromebook

[wufeng87]

So does Chinese, but it is OK for showing Chinese vertically. : )

[Kenny2github]

@wufeng87 what operating system are you using? 您在用什么操作系统？

[thisandagain]

@BryceLTaylor Could you attempt a repro?

[setoyama60jp]

This happened when narrowing down the width of the browser window.
(I checked Chrome 67.0.3396.99 on macOS High Sierra 10.13.6)
And did not happen when setting white-space : nowrap; to the span tag.

<span style="
    white-space: nowrap;
">ファイル</span>

[Kenny2github]

@setoyama60jp Thanks for the repro! And thanks for the suggested solution, as well. Yeah, this seems similar to a ScratchWikiSkin issue I had a while back (which was fixed by this pull, which can provide some more detail).

I also managed to repro this myself just now:

As you can see, I had inspect element open - this caused the page's width to shrink, and the Chinese characters to stack on top of each other.

The full solution would be to add white-space: nowrap; to the style of div.menu-bar_menu-bar-item_oLDa-.

[setoyama60jp]

@Kenny2github Thank you.
https://github.com/LLK/scratch-gui/blob/9e31cd2e8abae88cf3b9bd50041b436e45d9ca64/src/components/menu-bar/menu-bar.css#L60-L70

So maybe we should add white-space: nowrap; to the class above.
I'll test and send PR later (a week or later.)

[fsih]

@chrisgarrity how do you feel about making this help-wanted?

[setoyama60jp]

This issue was fixed #2806 .

[wufeng87]

@Kenny2github win10. Sorry for not reply in time.