From 9e0457e720403080552e521fb84478377fd48513 Mon Sep 17 00:00:00 2001
From: KnugiHK <24708955+KnugiHK@users.noreply.github.com>
Date: Mon, 12 Jan 2026 22:54:05 +0800
Subject: [PATCH] Adjust the reaction to be render on the bottom left/right
 corner

This makes the reaction match WhatsApp's theme.
---
 Whatsapp_Chat_Exporter/whatsapp.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Whatsapp_Chat_Exporter/whatsapp.html b/Whatsapp_Chat_Exporter/whatsapp.html
index b4b9c8a..cb56d06 100644
--- a/Whatsapp_Chat_Exporter/whatsapp.html
+++ b/Whatsapp_Chat_Exporter/whatsapp.html
@@ -230,7 +230,7 @@
                                     </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 %}
                                 <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">
@@ -288,7 +288,7 @@
                                 </p>
                                 <p class="text-[10px] text-[#667781] text-right mt-1">{{ msg.time }}</p>
                                 {% 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() %}
                                     <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 }}
@@ -300,7 +300,7 @@
                         </div>
                         {% else %}
                         <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 %}
                                 <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">
@@ -366,7 +366,7 @@
                                     <span class="flex-shrink-0">{{ msg.time }}</span>
                                     </div>
                                 {% 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() %}
                                     <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 }}