diff --git a/app/assets/javascripts/discourse/app/components/user-status-message.gjs b/app/assets/javascripts/discourse/app/components/user-status-message.gjs index 5a0e1dc7882..32e1b0e41a6 100644 --- a/app/assets/javascripts/discourse/app/components/user-status-message.gjs +++ b/app/assets/javascripts/discourse/app/components/user-status-message.gjs @@ -36,14 +36,16 @@ export default class UserStatusMessage extends Component { <:content> {{emoji @status.emoji skipTitle=true}} - - {{@status.description}} - - {{#if this.until}} -
- {{this.until}} -
- {{/if}} +
+ + {{@status.description}} + + {{#if this.until}} + + {{this.until}} + + {{/if}} +
{{/if}} diff --git a/app/assets/stylesheets/common/components/user-status-message.scss b/app/assets/stylesheets/common/components/user-status-message.scss index ed739527092..00b2db55ad4 100644 --- a/app/assets/stylesheets/common/components/user-status-message.scss +++ b/app/assets/stylesheets/common/components/user-status-message.scss @@ -1,4 +1,8 @@ [data-content][data-identifier="user-status-message-tooltip"] { + .fk-d-tooltip__inner-content { + gap: 0.65em; + } + .emoji { width: 1em; height: 1em; @@ -9,14 +13,9 @@ color: var(--primary-800); } - .user-status-tooltip-description { - font-weight: bold; - margin-left: 0.25rem; - vertical-align: middle; - } - .user-status-tooltip-until { color: var(--primary-medium); - padding-left: 0.25rem; + white-space: nowrap; + margin-left: 0.15em; } }