From f942599ce10b2486a62ba773a73e425576698b5c Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 16 Jan 2025 17:22:37 -0500
Subject: [PATCH] UX: improve the alignment of long status messages (#30830)

Before:


![image](https://github.com/user-attachments/assets/77005641-2289-4296-8988-242c139a376d)

After:


![image](https://github.com/user-attachments/assets/25889d78-7a5d-4097-9242-5cbd82e909ca)

Short message layout stays mostly unchanged:


![image](https://github.com/user-attachments/assets/893a8f03-0e24-4e68-bc6b-2469eba0523c)
---
 .../app/components/user-status-message.gjs     | 18 ++++++++++--------
 .../common/components/user-status-message.scss | 13 ++++++-------
 2 files changed, 16 insertions(+), 15 deletions(-)

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 {
         </:trigger>
         <:content>
           {{emoji @status.emoji skipTitle=true}}
-          <span class="user-status-tooltip-description">
-            {{@status.description}}
-          </span>
-          {{#if this.until}}
-            <div class="user-status-tooltip-until">
-              {{this.until}}
-            </div>
-          {{/if}}
+          <div class="user-status-tooltip-wrapper">
+            <span class="user-status-tooltip-description">
+              {{@status.description}}
+            </span>
+            {{#if this.until}}
+              <span class="user-status-tooltip-until">
+                {{this.until}}
+              </span>
+            {{/if}}
+          </div>
         </:content>
       </DTooltip>
     {{/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;
   }
 }