From 58af37238b0e9ab64c7504dd5e846ac384ce3ddf Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Sat, 28 Mar 2026 14:58:31 +0100
Subject: [PATCH] fix(ui): move retry counter above Resend button, same line as
 delivery info

Retry counter now renders as a dm-delivery-meta div above the Resend
button instead of inline next to it, matching the position of the
post-delivery info. Prevents text from crowding the button on short
messages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/static/css/style.css | 7 ++-----
 app/static/js/dm.js      | 7 +++++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index a8b5d79..f877b6d 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -738,10 +738,8 @@ main {
     position: relative;
 }
 
-.dm-retry-info {
-    font-size: 0.65rem;
-    color: var(--text-meta);
-    margin-right: auto;
+.dm-retry-info:empty {
+    display: none;
 }
 
 .dm-delivery-meta {
@@ -781,7 +779,6 @@ main {
 .dm-actions {
     display: flex;
     justify-content: flex-end;
-    align-items: center;
     margin-top: 0.25rem;
 }
 
diff --git a/app/static/js/dm.js b/app/static/js/dm.js
index afba961..cd38473 100644
--- a/app/static/js/dm.js
+++ b/app/static/js/dm.js
@@ -1205,10 +1205,12 @@ function displayMessages(messages) {
             deliveryMeta = `<div class="dm-delivery-meta">${parts.join(', ')}</div>`;
         }
 
-        // Resend button for own messages (with retry counter placeholder)
+        // Retry counter placeholder (same line as delivery meta)
+        const retryInfo = msg.is_own ? `<div class="dm-delivery-meta dm-retry-info" data-dm-id="${msg.id || ''}"></div>` : '';
+
+        // Resend button for own messages
         const resendBtn = msg.is_own ? `
             <div class="dm-actions">
-                <span class="dm-retry-info" data-dm-id="${msg.id || ''}"></span>
                 <button class="btn btn-outline-secondary btn-sm dm-action-btn" onclick='resendMessage(${JSON.stringify(msg.content)})' title="Resend">
                     <i class="bi bi-arrow-repeat"></i>
                 </button>
@@ -1222,6 +1224,7 @@ function displayMessages(messages) {
             </div>
             <div>${processMessageContent(msg.content)}</div>
             ${deliveryMeta}
+            ${retryInfo}
             ${meta}
             ${resendBtn}
         `;