Convert personal menu to use flexbox alignment.

Uses flexbox alignment to resolve an issue where the
clickable area of the notification and alert icons were
overlapping with the links next to them.

Bug: T264339
Change-Id: I2afc12504d7184583fa8331479125474c68017dc
This commit is contained in:
Jan Drewniak 2020-10-29 15:53:56 +01:00
parent 0bba957a37
commit 4ff30a16a0
3 changed files with 10 additions and 11 deletions

View file

@ -1,7 +1,16 @@
@import '../../variables.less';
@import 'mediawiki.mixins.less';
/* Personal */
/* Personal Menu */
#p-personal .vector-menu-content-list {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
align-items: baseline;
}
/* Personal Menu */
.mw-portlet {
// Hidden by default, but displayed by certain menus
// e.g. MenuPortal

View file

@ -97,15 +97,6 @@ body {
float: right;
}
#p-personal {
li {
// Some extensions e.g. Echo may change the height of list items
// If that's the case we want to ensure all other elements are vertically aligned consistently.
vertical-align: middle;
display: inline-block;
}
}
#mw-sidebar-button {
float: left; // Browser: IE9 support - button as flex-child fallback.
margin-left: -@margin-horizontal-sidebar-button-icon;

View file

@ -45,7 +45,6 @@
#p-personal {
flex-grow: 1;
text-align: right;
flex-basis: @min-width-personal-tools;
margin-left: @margin-horizontal-search;