Specify userMenu width (#8089)

Fixes https://github.com/vector-im/element-web/issues/21486

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-03-24 08:49:48 +00:00 committed by GitHub
parent 3317b60437
commit a5589d40e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -64,9 +64,13 @@ limitations under the License.
} }
} }
.mx_UserMenu_contextMenu { .mx_IconizedContextMenu {
width: 258px; &.mx_UserMenu_contextMenu {
width: 258px;
}
}
.mx_UserMenu_contextMenu {
&.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red { &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
.mx_AccessibleButton { .mx_AccessibleButton {
padding-top: 16px; padding-top: 16px;
@ -87,12 +91,15 @@ limitations under the License.
flex-direction: column; flex-direction: column;
width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
* { .mx_UserMenu_contextMenu_displayName,
// Automatically grow all subelements to fit the container .mx_UserMenu_contextMenu_userId {
font-size: $font-15px;
// Automatically grow subelements to fit the container
flex: 1; flex: 1;
width: 100%; width: 100%;
// Ellipsize any text overflow // Ellipsize text overflow
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -100,12 +107,10 @@ limitations under the License.
.mx_UserMenu_contextMenu_displayName { .mx_UserMenu_contextMenu_displayName {
font-weight: bold; font-weight: bold;
font-size: $font-15px;
line-height: $font-20px; line-height: $font-20px;
} }
.mx_UserMenu_contextMenu_userId { .mx_UserMenu_contextMenu_userId {
font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
} }
} }