| • alexhollender_WMF | |
| Aug 3 2022, 2:02 PM |
| F35474602: Screen Shot 2022-08-18 at 12.14.58 PM.png | |
| Aug 18 2022, 4:18 PM |
| F35473873: Screen Shot 2022-08-18 at 3.57.19 PM.png | |
| Aug 18 2022, 2:57 PM |
| F35469638: Screen Shot 2022-08-17 at 2.12.28 PM.png | |
| Aug 17 2022, 6:14 PM |
| F35384172: Screen Shot 2022-08-02 at 1.57.59 PM.png | |
| Aug 3 2022, 2:02 PM |
| F35384169: Screen Shot 2022-08-02 at 1.57.42 PM.png | |
| Aug 3 2022, 2:02 PM |
Currently there is a min-width of 200px on the User menu. This causes the User menu to be wider than it needs to be:
| with min-width (currently in production) | without min-width |
|---|---|
 |  |
@Jdlrobson mentioned (during standup) that the menu might need a min-width for some reason, but it doesn't necessarily need to be 200px. This task is for clarifying whether or not it needs a min width, and either removing or decreasing it.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | ovasileva | T317884 [EPIC] Vector 2022 post-deployment work | |||
| Open | ovasileva | T317632 [EPIC] Visual refinements pt2 | |||
| Duplicate | None | T311254 On mobile header icons overlap with search bar in responsive mode | |||
| Open | None | T106463 [EPIC] Ready responsive Vector for wider deployment | |||
| Invalid | Jdrewniak | T316055 Establish min & max widths for menus | |||
| In Progress | Jdrewniak | T314487 [Visual refinements] Decrease (or remove) min-width on Vector dropdown menus |
If I recall correctly the user menu width may be needed for IE11 and older browsers (as there is no flex or grid support). I would suggest double-checking that before any kind of removal. I think if that is the case it could likely be restricted to older browsers.
Digging through phab it seems like the min-width was first discussed here in T276564, and also mentioned in T276566. Looking through both discussions though there wasn't anything about needing it for IE11 or older browsers, it just seems like we landed on ~200px arbitrarily when we first implemented the user menu.
I don't know about IE11 or older browsers as I don't believe the user links dropdown relies on either flex or grid. However, there are cases where the content is very skinny without min-width, so I'd suggest we keep some sort of min width.
@bwang thanks for digging for that. ah ha, so it seems we added the min-width to protect against this happening in the logged-out version of the menu:
maybe it would make more sense to add a min-width specifically to that element (.vector-user-menu-anon-editor) rather than the menu itself?
What problem are we trying to solve here by removing the min-width? It seems like we should still define a min-width unconditionally for logged out menu but also for logged in menu in certain languages e.g. zhwiki
What problem are we trying to solve here by removing the min-width? It seems like we should still define a min-width unconditionally for logged out menu but also for logged in menu in certain languages e.g. zhwiki
there's not a problem for people using our website, more so it seems inconsistent that we're defining a min-width for this one menu...feels a bit like a magic number solution rather than something systematic.
@Volker_E @bmartinezcalvo @Sarai-WMDE is there any guidance you can provide regarding the minimum width of a menu?
| no min-width | no min-width (but the Pages for logged out... element has a min-width) |
|  |
this might also mean that in some languages menus are narrow (maybe this is fine?)
Personally I'd prefer if we handled this across all dropdowns, rather than just for the user menu. If we could find a sensible default, we could avoid having custom CSS for different dropdowns which would be harder to maintain. I think it would make sense to have both min and max width for defaults. Related slack thread
Agree with @bwang on sensible defaults for all menus. Me personally, I am a proponent of a small, mobile-friendly min-width in order to prevent certain menus falling into a slim, but tall appearance. Also increased whitespace is helping to ease-up the information density of those menus.
While we didn't feature a fixed CSS min-width in OOUI, we've ensured, that the menu is wider than the calling button, ending up in a min-width like width settting in the JS calculation.
@bwang @JScherer-WMF this ticket which dates back to 2022 is a little confusing and I am not really sure what problem we are trying to solve here. Can we decline it?
If we want to do something here, I suggest we should treat this as a 1 point design spike and create a new ticket using our task template as an outcome based on current code.
It seems the min-width is specific to the table of contents now (not all dropdowns)
The removal of the min width on https://en.wikipedia.beta.wmflabs.org/wiki/T314487 for the table of contents doesn't really do much.