diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index c161990..f52461b 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -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; diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index d9ce73b..daec540 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -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-.