1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-10-23 17:18:51 +02:00
phorge-phorge/webroot/rsrc/css/phui/phui-curtain-object-ref-view.css
epriestley 2a92fef879 Improve wrapping and overflow behavior for curtain panels containing long usernames
Summary:
Ref T13486. When a curtain element like "Author" in Maniphest has a very long username, the wrapping and overflow behavior is poor: the date is obscured.

Adjust curtain elements which contain lists of references to other objects to improve wrapping behavior (put the date on a separate line) and overflow behavior (so we get a "..." when a name overflows).

Test Plan: {F7179376}

Maniphest Tasks: T13486

Differential Revision: https://secure.phabricator.com/D20966
2020-02-04 12:31:18 -08:00

48 lines
960 B
CSS

/**
* @provides phui-curtain-object-ref-view-css
*/
.phui-curtain-object-ref-list-view-empty {
font-style: italic;
color: {$greytext};
}
.phui-curtain-object-ref-view-image-cell {
min-width: 32px;
min-height: 32px;
}
.phui-curtain-object-ref-view-image-cell > a {
height: 24px;
width: 24px;
background-size: 100%;
border-radius: 3px;
display: block;
}
.phui-curtain-object-ref-view-title-cell {
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
/* This is forcing "text-overflow: ellipsis" to actually work. */
max-width: 225px;
}
.phui-curtain-object-ref-view-without-content >
.phui-curtain-object-ref-view-title-cell {
vertical-align: middle;
}
.phui-curtain-object-ref-view-with-content >
.phui-curtain-object-ref-view-image-cell > a {
margin-top: 4px;
}
.phui-curtain-object-ref-view-title-cell > a {
color: {$darkgreytext};
}
.phui-curtain-object-ref-view-epoch-cell {
color: {$greytext};
}