From ad496c0fb53706f221241dd48440c68d3333937d Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 6 Sep 2026 19:48:19 -0700 Subject: Chat reactions render inside the bubble (Telegram-style), not floating below it. Reactions were a sibling of the bubble (a separate row under it), so they hung outside the message. Moved the reaction pills inside .chat-bubble, tucked under the text, across all three renderers: community channel messages, DMs, and the read-only public /chat page. The pill background and the "your reaction" highlight border now derive from the bubble's own text colour (color-mix on currentColor), so they read correctly on both the plain bubble and the accent "me" bubble. Tapping a pill stops propagation so it toggles the reaction without also opening the message action sheet. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz --- src/style.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index a99212d..6779579 100644 --- a/src/style.css +++ b/src/style.css @@ -469,13 +469,17 @@ hr.divider { margin: 16px 0; } display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--surface2); flex: 0 0 auto; } -.chat-reacts { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; } +/* Reactions sit INSIDE the bubble, tucked under the text (Telegram-style). + The pill tint/border derive from the bubble's own text colour, so they read + correctly on both the plain bubble and the accent "me" bubble. */ +.chat-reacts { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; } .chat-react { - font-size: 12px; background: var(--paper); border: 1px solid var(--line); - border-radius: 9px; padding: 1px 7px; + font-size: 12px; border-radius: 10px; padding: 1px 7px; + background: color-mix(in srgb, currentColor 13%, transparent); + border: 1px solid transparent; } .chat-react.clickable { cursor: pointer; } -.chat-react.on { border-color: var(--accent); color: var(--accent); } +.chat-react.on { border-color: color-mix(in srgb, currentColor 55%, transparent); font-weight: 600; } .chat-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; flex: 0 0 auto; -- cgit v1.2.3