From f1d7be175bc00f5b9e92e328a409a0a3048dd4e1 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 3 Dec 2025 10:44:47 -0600
Subject: [PATCH] Fix: ReactionPicker se alinea a la izquierda en mensajes
 propios
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregada prop 'align' al ReactionPicker (left/right)
- Mensajes propios (fromMe): picker se alinea a la izquierda (right-0)
- Mensajes recibidos: picker se alinea a la derecha (left-0)
- Evita que el picker extienda la página horizontalmente
---
 app/components/messages/MessageBubble.vue  | 1 +
 app/components/messages/ReactionPicker.vue | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/messages/MessageBubble.vue b/app/components/messages/MessageBubble.vue
index 1eef35c..7ae6eab 100644
--- a/app/components/messages/MessageBubble.vue
+++ b/app/components/messages/MessageBubble.vue
@@ -37,6 +37,7 @@
           <ReactionPicker
             :visible="showReactionPicker"
             :position="message.fromMe ? 'top' : 'bottom'"
+            :align="message.fromMe ? 'left' : 'right'"
             @select="handleReaction"
             @close="showReactionPicker = false"
           />
diff --git a/app/components/messages/ReactionPicker.vue b/app/components/messages/ReactionPicker.vue
index 74410d8..82e9ea9 100644
--- a/app/components/messages/ReactionPicker.vue
+++ b/app/components/messages/ReactionPicker.vue
@@ -2,7 +2,10 @@
   <div
     v-if="visible"
     class="absolute z-50 bg-[var(--wa-surface)] rounded-full shadow-lg border border-[var(--wa-border)] p-1 flex items-center gap-1"
-    :class="position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'"
+    :class="[
+      position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2',
+      align === 'left' ? 'right-0' : 'left-0'
+    ]"
     @click.stop
   >
     <button
@@ -48,11 +51,13 @@
 interface Props {
   visible: boolean
   position?: 'top' | 'bottom'
+  align?: 'left' | 'right'
 }
 
 withDefaults(defineProps<Props>(), {
   visible: false,
-  position: 'top'
+  position: 'top',
+  align: 'right'
 })
 
 const emit = defineEmits<{