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.
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.
