A wider hamburger menu?

On desktop, I’m finding menu items are getting truncated due to the narrow width of the menu:

Item text is truncated with elipses (as they exceed the CSS-defined max-width):


I considered widening the menu using CSS, but I notice the menu’s style is governed by the DOM:

Any chance the defaults could be raised? The width seems a bit restrictive at the moment, given the available width of the browser window.

4 Likes

@codinghorror @sam I’ve created a PR for your consideration:

3 Likes

Probably OK if you think so @sam

Probably fine, will leave it to @awesomerobot to merge as he is far more aware of carious side effects this could have.

I’d prefer a smaller bump to 320px to start with, which would match the width of the notification dropdown… 360 feels like it introduces a lot of space to the non-category items. I think this looks good to merge otherwise.

For reference:

300px (current width)

320px

360px

7 Likes

@awesomerobot thanks for taking the time to look into this and to consider the PR.

Just one minor point of note - in those comparisons it looks like the category name max-widths weren’t increased in the 360px version.

If the category name max-widths are increased along with the menu max-width, it helps avoid the truncation of category names.

To me, the truncation of category names is a serious UX problem which unfortunately is not solved by adding only an extra 20px to the menu width

1 Like

Right I understand, it’s just that 360 feels enormous here… to the point where I’d consider redesigning the menu to make better use of that space (which I’m not opposed too, it’s just not a high priority).

For now I’ve made the change for a small bump to 320, and I’ll keep the truncation in mind for future updates.

7 Likes