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;
}
}