From 8213864ad13bee1095fd1bd76bd6a65eca3c52ab Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 3 Dec 2025 10:01:24 -0600
Subject: [PATCH] =?UTF-8?q?UI:=20Mover=20botones=20de=20acci=C3=B3n=20fuer?=
 =?UTF-8?q?a=20del=20overflow-hidden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Botones de responder/reaccionar/debug ahora están fuera del contenedor con overflow
- ReactionPicker ya no se trunca y flota correctamente
- Botones siempre aparecen al lado izquierdo de la burbuja (usando flex-row-reverse para fromMe)
---
 app/components/messages/MessageBubble.vue | 92 +++++++++++------------
 1 file changed, 46 insertions(+), 46 deletions(-)

diff --git a/app/components/messages/MessageBubble.vue b/app/components/messages/MessageBubble.vue
index f16340a..2d5105b 100644
--- a/app/components/messages/MessageBubble.vue
+++ b/app/components/messages/MessageBubble.vue
@@ -12,14 +12,52 @@
       {{ senderName }}
     </span>
 
-    <div
-      class="relative max-w-[70%] rounded-lg overflow-hidden"
-      :class="bubbleClass"
-      @contextmenu.prevent="showReactionPicker = true"
-      @touchstart="onTouchStart"
-      @touchend="onTouchEnd"
-      @touchmove="onTouchEnd"
-    >
+    <!-- Message container with action buttons -->
+    <div class="relative flex items-start gap-1" :class="message.fromMe ? 'flex-row-reverse' : 'flex-row'">
+      <!-- Action buttons (always on left side of bubble) -->
+      <div
+        class="flex gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity pt-1"
+      >
+        <button
+          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          title="Responder"
+          @click="$emit('reply', message)"
+        >
+          <UIcon name="i-lucide-reply" class="w-4 h-4" />
+        </button>
+        <div class="relative">
+          <button
+            class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+            title="Reaccionar"
+            @click.stop="showReactionPicker = !showReactionPicker"
+          >
+            <UIcon name="i-lucide-smile-plus" class="w-4 h-4" />
+          </button>
+          <ReactionPicker
+            :visible="showReactionPicker"
+            :position="message.fromMe ? 'top' : 'bottom'"
+            @select="handleReaction"
+            @close="showReactionPicker = false"
+          />
+        </div>
+        <button
+          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          title="Debug"
+          @click="showDebug = !showDebug"
+        >
+          <UIcon name="i-lucide-bug" class="w-4 h-4" />
+        </button>
+      </div>
+
+      <!-- Message bubble -->
+      <div
+        class="relative max-w-[70%] rounded-lg overflow-hidden"
+        :class="bubbleClass"
+        @contextmenu.prevent="showReactionPicker = true"
+        @touchstart="onTouchStart"
+        @touchend="onTouchEnd"
+        @touchmove="onTouchEnd"
+      >
       <!-- Quoted message -->
       <div v-if="message.quoted" class="px-2 pt-2">
         <MessageQuoted
@@ -144,44 +182,6 @@
           :class="statusColor"
         />
       </div>
-
-      <!-- Action buttons on hover -->
-      <div
-        class="absolute top-1 opacity-0 group-hover/message:opacity-100 transition-opacity flex gap-0.5"
-        :class="message.fromMe ? 'left-1' : 'right-1'"
-      >
-        <button
-          class="p-1 rounded-full hover:bg-black/10"
-          :class="message.fromMe ? 'text-white/60 hover:text-white' : 'text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]'"
-          title="Responder"
-          @click="$emit('reply', message)"
-        >
-          <UIcon name="i-lucide-reply" class="w-4 h-4" />
-        </button>
-        <div class="relative">
-          <button
-            class="p-1 rounded-full hover:bg-black/10"
-            :class="message.fromMe ? 'text-white/60 hover:text-white' : 'text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]'"
-            title="Reaccionar"
-            @click.stop="showReactionPicker = !showReactionPicker"
-          >
-            <UIcon name="i-lucide-smile-plus" class="w-4 h-4" />
-          </button>
-          <ReactionPicker
-            :visible="showReactionPicker"
-            position="bottom"
-            @select="handleReaction"
-            @close="showReactionPicker = false"
-          />
-        </div>
-        <button
-          class="p-1 rounded-full hover:bg-black/10"
-          :class="message.fromMe ? 'text-white/60 hover:text-white' : 'text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]'"
-          title="Debug"
-          @click="showDebug = !showDebug"
-        >
-          <UIcon name="i-lucide-bug" class="w-3.5 h-3.5" />
-        </button>
       </div>
     </div>