golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Add max-width to user menu and text-overflow: ellipsis 

When implementing how to cut overflowing text, a white fade out was
considered instead of an ellipsis, but that implementation brings
additional complexity when considering the user menu's hover states.

Therefore, the widely used `text-overflow: ellipsis` was used instead
with approval from the designer [1]

[1] https://phabricator.wikimedia.org/T287522#7255400

Bug: T287522
Change-Id: I49e6084bd621ca1637fbd167c8eaf8c07ee695ca
This commit is contained in:
Nicholas Ray 2021-08-03 15:16:43 -06:00
parent ddd46f74b1
commit 8c36871f1b
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/skins.vector.styles/components/UserLinks.less
View File

@ -68,6 +68,7 @@
.vector-menu-content {
min-width: 200px;
max-width: 350px;
top: 100%;
left: unset;
right: 0;
@ -111,6 +112,11 @@
span {
font-size: @font-size-user-links;
text-overflow: ellipsis;
overflow: hidden;
// Overrides .mw-ui-icon's `line-height: 0` property so that the text is
// visible when not overflowing.
line-height: initial;
}
// Set hover color for "Create account" and "Login" menu items.