Adjust the reaction to be render on the bottom left/right corner

This makes the reaction match WhatsApp's theme.
This commit is contained in:
KnugiHK
2026-01-12 22:54:05 +08:00
parent e0967a3104
commit 9e0457e720

View File

@@ -230,7 +230,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bg-whatsapp-light rounded-lg p-2 max-w-[80%] shadow-sm"> <div class="bg-whatsapp-light rounded-lg p-2 max-w-[80%] shadow-sm relative {% if msg.reactions %}mb-2{% endif %}">
{% if msg.reply is not none %} {% if msg.reply is not none %}
<a href="#{{msg.reply}}" target="_self" class="no-base"> <a href="#{{msg.reply}}" target="_self" class="no-base">
<div class="mb-2 p-1 bg-whatsapp-chat-light rounded border-l-4 border-whatsapp text-sm reply-box"> <div class="mb-2 p-1 bg-whatsapp-chat-light rounded border-l-4 border-whatsapp text-sm reply-box">
@@ -288,7 +288,7 @@
</p> </p>
<p class="text-[10px] text-[#667781] text-right mt-1">{{ msg.time }}</p> <p class="text-[10px] text-[#667781] text-right mt-1">{{ msg.time }}</p>
{% if msg.reactions %} {% if msg.reactions %}
<div class="flex flex-wrap gap-1 mt-1 justify-end"> <div class="flex flex-wrap gap-1 mt-1 justify-end absolute -bottom-3 -right-2">
{% for sender, emoji in msg.reactions.items() %} {% for sender, emoji in msg.reactions.items() %}
<div class="bg-white rounded-full px-1.5 py-0.5 text-xs shadow-sm border border-gray-200 cursor-help" title="{{ sender }}"> <div class="bg-white rounded-full px-1.5 py-0.5 text-xs shadow-sm border border-gray-200 cursor-help" title="{{ sender }}">
{{ emoji }} {{ emoji }}
@@ -300,7 +300,7 @@
</div> </div>
{% else %} {% else %}
<div class="flex justify-start items-center group" id="{{ msg.key_id }}"> <div class="flex justify-start items-center group" id="{{ msg.key_id }}">
<div class="bg-white rounded-lg p-2 max-w-[80%] shadow-sm"> <div class="bg-white rounded-lg p-2 max-w-[80%] shadow-sm relative {% if msg.reactions %}mb-2{% endif %}">
{% if msg.reply is not none %} {% if msg.reply is not none %}
<a href="#{{msg.reply}}" target="_self" class="no-base"> <a href="#{{msg.reply}}" target="_self" class="no-base">
<div class="mb-2 p-1 bg-whatsapp-chat-light rounded border-l-4 border-whatsapp text-sm reply-box"> <div class="mb-2 p-1 bg-whatsapp-chat-light rounded border-l-4 border-whatsapp text-sm reply-box">
@@ -366,7 +366,7 @@
<span class="flex-shrink-0">{{ msg.time }}</span> <span class="flex-shrink-0">{{ msg.time }}</span>
</div> </div>
{% if msg.reactions %} {% if msg.reactions %}
<div class="flex flex-wrap gap-1 mt-1 justify-start"> <div class="flex flex-wrap gap-1 mt-1 justify-start absolute -bottom-3 -left-2">
{% for sender, emoji in msg.reactions.items() %} {% for sender, emoji in msg.reactions.items() %}
<div class="bg-gray-100 rounded-full px-1.5 py-0.5 text-xs shadow-sm border border-gray-200 cursor-help" title="{{ sender }}"> <div class="bg-gray-100 rounded-full px-1.5 py-0.5 text-xs shadow-sm border border-gray-200 cursor-help" title="{{ sender }}">
{{ emoji }} {{ emoji }}