Fix: ReactionPicker se alinea a la izquierda en mensajes propios

- 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

@@ -37,6 +37,7 @@
           <ReactionPicker
             :visible="showReactionPicker"
             :position="message.fromMe ? 'top' : 'bottom'"
+            :align="message.fromMe ? 'left' : 'right'"
             @select="handleReaction"
             @close="showReactionPicker = false"
           />

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<{