diff --git a/apps/user_status/js/user-status-menu.js b/apps/user_status/js/user-status-menu.js index 9a29d611262c4b2b58fa30a4c5360e38ae432664..bd3038cb3fb3ce36fb615ffab1d866f05628fdfd 100644 Binary files a/apps/user_status/js/user-status-menu.js and b/apps/user_status/js/user-status-menu.js differ diff --git a/apps/user_status/js/user-status-menu.js.map b/apps/user_status/js/user-status-menu.js.map index be5158c8a8b359736223cbab80c70d7ba2f1a7bb..bfd619568424fbc1bc2ca1d43684d1d872212d08 100644 Binary files a/apps/user_status/js/user-status-menu.js.map and b/apps/user_status/js/user-status-menu.js.map differ diff --git a/apps/user_status/src/App.vue b/apps/user_status/src/App.vue index 8db000e9f90db966f4db547682dd943f349d191f..7338c8f98c77213f9dbc2f9902c4da81d3ec2c5a 100644 --- a/apps/user_status/src/App.vue +++ b/apps/user_status/src/App.vue @@ -31,7 +31,8 @@ <Actions id="user-status-menu-item__subheader" :default-icon="statusIcon" - :menu-title="visibleMessage"> + :menu-title="visibleMessage" + :title="visibleMessage"> <ActionButton v-for="status in statuses" :key="status.type" @@ -244,15 +245,18 @@ export default { </script> <style lang="scss"> +$max-width-user-status: 200px; + li:not(.inline) #user-status-menu-item { &__header { display: block; - color: var(--color-main-text); + box-sizing: border-box; + color: var(--color-text-maxcontrast); padding: 10px 12px 5px 38px; opacity: 1; white-space: nowrap; text-align: left; - max-width: 150px; + max-width: $max-width-user-status; overflow: hidden; text-overflow: ellipsis; } @@ -261,6 +265,8 @@ li:not(.inline) #user-status-menu-item { width: 100%; > button { + display: block; + box-sizing: border-box; background-color: var(--color-main-background); background-position: 12px center; background-size: 16px; @@ -269,6 +275,9 @@ li:not(.inline) #user-status-menu-item { font-weight: normal; padding-left: 38px; opacity: 1; + max-width: $max-width-user-status; + overflow: hidden; + text-overflow: ellipsis; &:hover, &:focus {