From 2de09811cea630c1bf33698cc2323095de0f8a6c Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Tue, 20 Jan 2026 07:52:25 +0100
Subject: [PATCH] fix: Improve chat avatar styling and layout

- Reduce horizontal padding in messages container
- Add colored circle background to emoji avatars
- Fix vertical alignment of avatar with sender name

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 7471c43..ebbb26d 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -30,6 +30,8 @@ main {
 /* Messages Container */
 .messages-container {
     background-color: #ffffff;
+    padding-left: 0.5rem !important;
+    padding-right: 0.5rem !important;
 }
 
 #messagesList {
@@ -45,6 +47,7 @@ main {
 /* Message wrapper - contains avatar + message container */
 .message-wrapper {
     display: flex;
+    align-items: flex-start;
     gap: 0.5rem;
     max-width: 85%;
     animation: fadeIn 0.3s ease-in;
@@ -72,11 +75,11 @@ main {
     font-weight: 600;
     color: white;
     text-transform: uppercase;
+    margin-top: 0.1rem;
 }
 
 .message-avatar.emoji {
     font-size: 1.25rem;
-    background-color: transparent !important;
 }
 
 /* Message container - holds sender row + bubble + actions */