From 3f6c87398d65a23549370719606a8221763dcc16 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Mon, 26 Jan 2026 21:10:16 +0100
Subject: [PATCH] refactor: Move action buttons inside message bubbles

- Move Reply, Quote, Map, Resend buttons inside message bubbles
- Unify Map button style (outline-secondary like others)
- Add subtle separator line between message and buttons
- Slightly smaller buttons (28px) for better fit inside bubbles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css | 10 ++++++----
 app/static/js/app.js     | 34 +++++++++++++++++-----------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index bf7482a..b0a5513 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -133,7 +133,9 @@ main {
 .message-actions {
     display: flex;
     gap: 0.25rem;
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 /* Message Bubbles */
@@ -851,13 +853,13 @@ main {
 
 /* Icon-only action buttons on message bubbles */
 .btn-msg-action {
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 1rem;
+    font-size: 0.875rem;
 }
 
 /* =============================================================================
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 8a36566..b0e3fee 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -719,11 +719,11 @@ function createMessageElement(msg) {
                 </div>
                 <div class="message own">
                     <div class="message-content">${processMessageContent(msg.content)}</div>
-                </div>
-                <div class="message-actions justify-content-end">
-                    <button class="btn btn-outline-secondary btn-msg-action" onclick='resendMessage(${JSON.stringify(msg.content)})' title="Resend">
-                        <i class="bi bi-arrow-repeat"></i>
-                    </button>
+                    <div class="message-actions justify-content-end">
+                        <button class="btn btn-outline-secondary btn-msg-action" onclick='resendMessage(${JSON.stringify(msg.content)})' title="Resend">
+                            <i class="bi bi-arrow-repeat"></i>
+                        </button>
+                    </div>
                 </div>
             </div>
         `;
@@ -747,19 +747,19 @@ function createMessageElement(msg) {
                 <div class="message other">
                     <div class="message-content">${processMessageContent(msg.content)}</div>
                     ${metaInfo ? `<div class="message-meta">${metaInfo}</div>` : ''}
-                </div>
-                <div class="message-actions">
-                    <button class="btn btn-outline-secondary btn-msg-action" onclick="replyTo('${escapeHtml(msg.sender)}')" title="Reply">
-                        <i class="bi bi-reply"></i>
-                    </button>
-                    <button class="btn btn-outline-secondary btn-msg-action" onclick='quoteTo(${JSON.stringify(msg.sender)}, ${JSON.stringify(msg.content)})' title="Quote">
-                        <i class="bi bi-quote"></i>
-                    </button>
-                    ${contactsGeoCache[msg.sender] ? `
-                        <button class="btn btn-outline-primary btn-msg-action" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})" title="Show on map">
-                            <i class="bi bi-geo-alt"></i>
+                    <div class="message-actions">
+                        <button class="btn btn-outline-secondary btn-msg-action" onclick="replyTo('${escapeHtml(msg.sender)}')" title="Reply">
+                            <i class="bi bi-reply"></i>
                         </button>
-                    ` : ''}
+                        <button class="btn btn-outline-secondary btn-msg-action" onclick='quoteTo(${JSON.stringify(msg.sender)}, ${JSON.stringify(msg.content)})' title="Quote">
+                            <i class="bi bi-quote"></i>
+                        </button>
+                        ${contactsGeoCache[msg.sender] ? `
+                            <button class="btn btn-outline-secondary btn-msg-action" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})" title="Show on map">
+                                <i class="bi bi-geo-alt"></i>
+                            </button>
+                        ` : ''}
+                    </div>
                 </div>
             </div>
         `;