From d76b4bb707fbfad3412c3a14882eeb7f4c4bcf64 Mon Sep 17 00:00:00 2001
From: Carlos Fernandez <CarlosFdez@users.noreply.github.com>
Date: Sat, 18 Jul 2026 05:42:50 -0400
Subject: [PATCH] Fix chat being jumpy as timestamps get longer (#2095)

---
 styles/less/global/chat.less       | 87 +++++++++++++++++++-----------
 templates/ui/chat/chat-message.hbs | 41 +++++++-------
 2 files changed, 79 insertions(+), 49 deletions(-)

diff --git a/styles/less/global/chat.less b/styles/less/global/chat.less
index b9478ea4..4e29cfff 100644
--- a/styles/less/global/chat.less
+++ b/styles/less/global/chat.less
@@ -7,12 +7,12 @@
     .chat-log .chat-message {
         background-image: url('../assets/parchments/dh-parchment-light.png');
 
-        .message-header .message-header-metadata .message-metadata,
-        .message-header .message-header-main .message-sub-header-container {
+        .message-header .message-header-main .message-metadata,
+        .message-header .message-header-main .name {
             color: @dark;
         }
 
-        .message-header .message-header-main .message-sub-header-container h4 {
+        .message-header .message-header-main h4 {
             color: @dark-blue;
         }
 
@@ -42,27 +42,12 @@
 
             .message-header {
                 display: flex;
-                gap: 4px;
+                gap: 8px;
                 padding: 8px;
+                align-items: center;
 
-                .message-header-metadata {
-                    flex: none;
-                    display: flex;
-                    flex-direction: column;
-
-                    .message-metadata {
-                        font-family: @font-body;
-                        color: @beige;
-                    }
-                }
-
-                .message-header-main {
-                    display: flex;
-                    align-items: center;
-                    gap: 8px;
-                    flex: 1;
-                    overflow: hidden;
-
+                .portrait {
+                    flex: 0 0 auto;
                     .actor-img {
                         border-radius: 50%;
                         width: 40px;
@@ -70,20 +55,60 @@
                         object-fit: cover;
                         object-position: top center;
                     }
+                }
 
-                    .message-sub-header-container {
+                .message-header-main {
+                    display: flex;
+                    align-items: center;
+                    column-gap: 4px;
+                    row-gap: 2px;
+                    flex: 1;
+                    overflow: hidden;
+
+                    display: grid;
+                    grid-template:
+                        "title metadata"
+                        "subtitle subtitle";
+
+                    h4 {
+                        font-size: var(--font-size-16);
+                        font-weight: bold;
+                        margin-bottom: 0;
+                        font-family: @font-subtitle;
+                        color: @golden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        flex: 1;
+                        overflow: hidden;
+                        align-self: flex-end;
+                    }
+                    
+                    .message-metadata {
+                        font-family: @font-body;
+                        color: @beige;
+                        white-space: nowrap;
+                        align-items: baseline;
+                        .message-timestamp {
+                            font-size: var(--font-size-11);
+                        }
+                    }
+                    
+                    .subtitle {
+                        grid-area: subtitle;
                         flex: 1;
                         display: flex;
-                        flex-direction: column;
                         justify-content: space-between;
                         color: @beige;
-
-                        h4 {
-                            font-size: var(--font-size-16);
-                            font-weight: bold;
-                            margin-bottom: 0;
-                            font-family: @font-subtitle;
-                            color: @golden;
+                        gap: 4px;
+                        align-items: baseline;
+                        line-height: 1;
+                        .name {
+                            flex: 1;
+                        }
+                        .whisper-to {
+                            color: @color-text-subtle;
+                            flex: 0;
+                            white-space: nowrap;
                         }
                     }
                 }
diff --git a/templates/ui/chat/chat-message.hbs b/templates/ui/chat/chat-message.hbs
index 87ecce39..92490cec 100644
--- a/templates/ui/chat/chat-message.hbs
+++ b/templates/ui/chat/chat-message.hbs
@@ -1,23 +1,18 @@
 <li class="chat-message message flexcol {{cssClass}}" data-message-id="{{message._id}}"
     {{#if borderColor}}style="border-color:{{borderColor}}"{{/if}}>
     <header class="message-header flexrow">
-        <div class="message-header-main">
+        <div class="portrait">
             <img class="actor-img" src="{{actor.img}}" />
-            <div class="message-sub-header-container">
-                {{#if message.title}}
-                    <h4>{{message.title}}</h4>
-                    <div>{{alias}} {{#if author.isGM}}(GM){{/if}}</div>
-                {{else}}
-                    {{#unless actor.name}}
-                        <h4>{{author.name}}</h4>
-                    {{else}}
-                        <h4>{{alias}}</h4>
-                        <div>{{author.name}}</div>
-                    {{/unless}}
-                {{/if}}
-            </div>
         </div>
-        <div class="message-header-metadata">
+        <div class="message-header-main">
+            {{#if message.title}}
+                <h4>{{message.title}}</h4>
+            {{else if (not actor.name)}}
+                <h4>{{author.name}}</h4>
+            {{else}}
+                <h4>{{alias}}</h4>
+            {{/if}}
+
             <span class="message-metadata">
                 <time class="message-timestamp">{{timeSince message.timestamp}}</time>
                 {{#if canDelete}}
@@ -32,9 +27,19 @@
                 {{/if}}
             </span>
 
-            {{#if isWhisper}}
-            <span class="whisper-to">{{localize 'CHAT.To'}}: {{whisperTo}}</span>
-            {{/if}}
+            <div class="subtitle">
+                <div class="name">
+                    {{#if message.title}}
+                        {{alias}} {{#if author.isGM}}(GM){{/if}}
+                    {{else if (not actor.name)}}
+                        {{author.name}}
+                    {{/if}}
+                </div>
+
+                {{#if isWhisper}}
+                    <span class="whisper-to">{{localize 'CHAT.To'}}: {{whisperTo}}</span>
+                {{/if}}
+            </div>
         </div>
     </header>
     <div class="message-content">