v0.3.5 avatar alignment fix

This commit is contained in:
2026-03-09 20:58:17 -04:00
parent 1e4dfe5110
commit 0f3983dc93
7 changed files with 23 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -391,3 +391,11 @@ a { color: inherit; text-decoration: none; }
color: #ffffff; color: #ffffff;
background: rgba(255,255,255,0.25); 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);
}