A wider hamburger menu?
The discussion revolves around the idea of widening the hamburger menu on desktop due to truncation issues with longer menu item names. ChrisBeach initially suggested raising the default width, sharing images to demonstrate the issue. He created a PR to address this, which was reviewed by codinghorror, sam, and awesomerobot.
awesomerobot preferred a smaller bump to 320px, which was implemented. However, ChrisBeach pointed out that this change didn’t address the truncation of category names, which remains a UX issue. awesomerobot acknowledged this and may consider redesigning the menu in the future to better utilize the available space. For now, the menu width has been increased to 320px.
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.
@codinghorror @sam I’ve created a PR for your consideration:
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
@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
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.
