wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 17:40:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Set responsive max-width on username in header"

Browse source
This commit is contained in:
jenkins-bot 2021-09-01 15:01:46 +00:00 committed by Gerrit Code Review
parent 3f5abe98e0 5ca9d00d55
commit c34ba94a94
2 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
resources/skins.vector.styles/components/UserLinks.less
View file

@ -1,4 +1,5 @@
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
@padding-horizontal-user-links: 12px;
@ -46,6 +47,20 @@
display: flex;
align-items: center;
}
#pt-userpage-2 {
max-width: unit( 155 / @font-size-browser / @font-size-base, em );
span {
.text-overflow( @visible: false );
}
// T287522#7295558: Increase the max-width of the username when viewport
// allows for it.
@media ( min-width: @width-breakpoint-desktop-wide ) {
max-width: unit( 200 / @font-size-browser / @font-size-base, em );
}
}
}
// Overrides personal menu styles for consolidated user links.
@ -74,7 +89,7 @@
.vector-menu-content {
min-width: 200px;
max-width: 350px;
max-width: unit( 350px / @font-size-browser, em );
top: 100%;
left: unset;
right: 0;
@ -118,8 +133,7 @@
span {
font-size: @font-size-user-links;
text-overflow: ellipsis;
overflow: hidden;
.text-overflow( @visible: false );
// Overrides .mw-ui-icon's `line-height: 0` property so that the text is
// visible when not overflowing.
line-height: initial;

6
resources/skins.vector.styles/layouts/screen.less
View file

@ -141,7 +141,7 @@ body {
// Vertical centering of header elements (IE>=11), requires flex.
// Non-flex fallback for IE<=9: float rule on the child elements.
.flex-display();
flex-wrap: wrap;
flex-wrap: nowrap;
// https://caniuse.com/#search=align-items
align-items: center;
// allow z-index to apply so search results overlay article
@ -399,10 +399,6 @@ body {
}
@media ( min-width: @width-breakpoint-desktop ) {
.mw-header {
flex-wrap: wrap;
}
#p-search {
margin: 0 @margin-end-search 0 @margin-horizontal-search;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.