Defect #44443
closed
Top menu is thinner than expected when the user is not logged in
Description
The top menu is thinner than it should be when the user is not logged in. Its height is 17px for anonymous users, while it is 28px for logged-in users, which is the intended height.
This is a side effect of the change made to the account menu in Redmine 7.0.0 (#31353). Since that change, the account menu shows a 22px avatar for logged-in users, and the avatar defines the height of the bar. For anonymous users, no avatar is shown, so the bar collapses to the height of the text links.
The attached patch fixes this issue by reserving the avatar height so that the bar is 28px tall whether or not the avatar is shown. The height is set on .profile-menu inside #top-menu rather than on #top-menu itself, to avoid affecting themes that set their own height on #top-menu (for example, the bundled Classic theme).
Before:
After:
Files
Related issues
Updated by Go MAEDA 29 days ago
- Related to Feature #31353: Replace user related links in the top menu bar with a proper user menu. added
Updated by Marius BĂLTEANU 29 days ago
This was actually the intended behavior in order to keep the top menu height to a minimum (I assumed this was desired), but I also prefer to have the same height in both cases.
Updated by Go MAEDA 28 days ago
Marius BĂLTEANU wrote in #note-2:
This was actually the intended behavior in order to keep the top menu height to a minimum (I assumed this was desired), but I also prefer to have the same height in both cases.
Thank you for the explanation.
That said, I feel that the top menu suddenly changing its height right after logging in or out looks unnatural, as if something were broken.
On a desktop browser, a difference of 11px in height is hardly noticeable. I am not sure that this benefit outweighs the awkwardness of the height change.
I would appreciate it if you could consider applying the patch.
Updated by Marius BĂLTEANU 28 days ago
- Assignee set to Marius BĂLTEANU
- Target version changed from Candidate for next minor release to 7.0.2
Updated by Marius BĂLTEANU 25 days ago
- Status changed from New to Confirmed
- Resolution set to Fixed
I've committed the patch, thanks!
Go MAEDA wrote:
The attached patch fixes this issue by reserving the avatar height so that the bar is 28px tall whether or not the avatar is shown. The height is set on
.profile-menuinside#top-menurather than on#top-menuitself, to avoid affecting themes that set their own height on#top-menu(for example, the bundled Classic theme).
For 7.1.0, I think it's better to set min-block-size: 28px; directly on nav.top-menu and modernize the Classic theme's top menu to the same 28px height by removing block-size: 1.4rem; padding-block: 0.5rem 0; from #top-menu.
This approach keeps the sizing on the actual navigation container rather than a child element, and also fixes the existing issue in the Classic theme where the avatar overflows the top bar for logged-in users.
To make it easier for theme developers to override the height of the top-menu, we can move the value to a root CSS variable.
Updated by Marius BĂLTEANU 25 days ago
- Status changed from Confirmed to Resolved