v0.3.5 avatar alignment fix

.env.example

@@ -7,7 +7,7 @@ TZ=UTC
 # Copy this file to .env and customize
 
 # Image version to run (set by build.sh, or use 'latest')
-JAMA_VERSION=0.3.4
+JAMA_VERSION=0.3.5
 
 # Default admin credentials (used on FIRST RUN only)
 ADMIN_NAME=Admin User

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jama-backend",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "TeamChat backend server",
   "main": "src/index.js",
   "scripts": {

build.sh

@@ -13,7 +13,7 @@
 # ─────────────────────────────────────────────────────────────
 set -euo pipefail
 
-VERSION="${1:-0.3.4}"
+VERSION="${1:-0.3.5}"
 ACTION="${2:-}"
 REGISTRY="${REGISTRY:-}"
 IMAGE_NAME="jama"

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "private": true,
   "scripts": {
     "dev": "vite",

frontend/src/components/Message.css

@@ -54,15 +54,17 @@
 
 .message-wrapper {
   display: flex;
-  align-items: flex-end;
+  align-items: flex-start;
   gap: 8px;
   padding: 1px 0;
   position: relative;
 }
 
 .message-wrapper.own { flex-direction: row-reverse; }
-.message-wrapper.grouped { margin-top: 1px; }
-.message-wrapper:not(.grouped) { margin-top: 8px; }
+.message-wrapper.grouped { margin-top: 2px; }
+.message-wrapper:not(.grouped) { margin-top: 10px; }
+
+.avatar-spacer { width: 32px; flex-shrink: 0; }
 
 .msg-avatar { flex-shrink: 0; }
 
@@ -102,7 +104,7 @@
 /* Bubble row */
 .msg-bubble-wrap {
   display: flex;
-  align-items: flex-end;
+  align-items: flex-start;
   gap: 6px;
 }
 
@@ -254,7 +256,7 @@
   gap: 3px;
   padding: 3px 8px;
   border-radius: 12px;
-  background: white;
+  background: var(--surface);
   border: 1px solid var(--border);
   font-size: 14px;
   cursor: pointer;

frontend/src/components/Message.jsx

@@ -49,9 +49,9 @@ export default function Message({ message: msg, prevMessage, currentUser, onRepl
   const showDateSep = !prevMessage ||
     parseTS(msg.created_at).toDateString() !== parseTS(prevMessage.created_at).toDateString();
 
-  const prevSameUser = prevMessage && prevMessage.user_id === msg.user_id &&
-    prevMessage.type !== 'system' && msg.type !== 'system' &&
-    parseTS(msg.created_at) - parseTS(prevMessage.created_at) < 60000;
+  const prevSameUser = !showDateSep && prevMessage &&
+    prevMessage.user_id === msg.user_id &&
+    prevMessage.type !== 'system' && msg.type !== 'system';
 
   const canDelete = !msg.is_deleted && (
     msg.user_id === currentUser.id ||
@@ -147,7 +147,7 @@ export default function Message({ message: msg, prevMessage, currentUser, onRepl
             <Avatar user={msgUser} size="sm" className="msg-avatar" />
           </div>
         )}
-        {!isOwn && prevSameUser && <div style={{ width: 32, flexShrink: 0 }} />}
+        {!isOwn && prevSameUser && <div className="avatar-spacer" />}
 
         <div className="message-body">
           {!isOwn && !prevSameUser && (

frontend/src/index.css

@@ -391,3 +391,11 @@ a { color: inherit; text-decoration: none; }
   color: #ffffff;
   background: rgba(255,255,255,0.25);
 }
+
+[data-theme="dark"] .reaction-btn {
+  background: var(--surface-variant);
+  border-color: var(--border);
+}
+[data-theme="dark"] .reaction-btn:hover {
+  background: var(--primary-light);
+}