Bulma: navbar-brand overflowing in 0.5.0 on mobile, end content not visible in smaller desktop window

[ivangreene]

Overview of the problem

This is about the Bulma CSS framework
This issue makes an appearance in the Bulma Docs

My browser is: Chrome for iOS, Safari for iOS, Chrome Device Toolbar

I am sure this issue is not a duplicate

Description

Prominently visible in the Bulma Docs.

• On mobile size screens, .navbar-brand content that exceeds the width of the screen will overflow and cause the window size to be expanded, rather than being scrollable by themselves.
• On desktop screens that are smaller than the content of a .navbar-brand, the end of the content will not be visible at all, and there is no way to scroll to the end of it.
• This is a new issue as of 0.5.0, it displays as expected in the docs from 0.4.4

Steps to Reproduce

1. View Bulma Docs on a mobile device, or using Chrome Device Toolbar.
2. Navigate to a page with a navbar who's content exceeds the screen size (i.e. http://bulma.io/documentation/components/breadcrumb/)
3. Examine the navbar in the center (underneath the tabs)

Expected behavior

.navbar-brand content should be scrollable, window width should be appropriate to screen size.

Actual behavior

Window is resized to fit overflowing content of .navbar-brand.

Culprit

Removing flex-shrink: 0; from the .navbar-brand class causes these to be displayed correctly. It appears to have been added in 665fb15753de6a28eccd27ab2f97eef381410bad . Unsure if removing this style will break other things.

Screenshot

See Also

Issue #324

[ivangreene]

Thanks for the ultra-quick rectification! And as always, thank you so much for releasing Bulma under the MIT license 😄