From 5007049bcf7ced21a8fbe8190d6994a936890252 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 3 Dec 2025 10:26:45 -0600
Subject: [PATCH] =?UTF-8?q?UI:=20Botones=20de=20acci=C3=B3n=20flotantes=20?=
 =?UTF-8?q?con=20position=20absolute?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Botones ahora flotan fuera de la burbuja sin ocupar espacio
- Para mensajes propios: botones a la izquierda (right-full)
- Para mensajes recibidos: botones a la derecha (left-full)
- Agregado fondo y sombra a los botones para mejor visibilidad
---
 app/components/messages/MessageBubble.vue | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/components/messages/MessageBubble.vue b/app/components/messages/MessageBubble.vue
index 2d5105b..1eef35c 100644
--- a/app/components/messages/MessageBubble.vue
+++ b/app/components/messages/MessageBubble.vue
@@ -12,14 +12,15 @@
       {{ senderName }}
     </span>
 
-    <!-- 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) -->
+    <!-- Message bubble with floating action buttons -->
+    <div class="relative max-w-[70%]">
+      <!-- Action buttons (floating, always on left side) -->
       <div
-        class="flex gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity pt-1"
+        class="absolute z-10 flex gap-0.5 opacity-0 group-hover/message:opacity-100 transition-opacity"
+        :class="message.fromMe ? 'right-full mr-1 top-0' : 'left-full ml-1 top-0'"
       >
         <button
-          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          class="p-1 rounded-full bg-[var(--wa-surface)] hover:bg-[var(--wa-bg-light)] text-[var(--wa-text-muted)] hover:text-[var(--wa-text)] shadow-sm"
           title="Responder"
           @click="$emit('reply', message)"
         >
@@ -27,7 +28,7 @@
         </button>
         <div class="relative">
           <button
-            class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+            class="p-1 rounded-full bg-[var(--wa-surface)] hover:bg-[var(--wa-bg-light)] text-[var(--wa-text-muted)] hover:text-[var(--wa-text)] shadow-sm"
             title="Reaccionar"
             @click.stop="showReactionPicker = !showReactionPicker"
           >
@@ -41,7 +42,7 @@
           />
         </div>
         <button
-          class="p-1 rounded-full hover:bg-black/10 text-[var(--wa-text-muted)] hover:text-[var(--wa-text)]"
+          class="p-1 rounded-full bg-[var(--wa-surface)] hover:bg-[var(--wa-bg-light)] text-[var(--wa-text-muted)] hover:text-[var(--wa-text)] shadow-sm"
           title="Debug"
           @click="showDebug = !showDebug"
         >
@@ -49,9 +50,9 @@
         </button>
       </div>
 
-      <!-- Message bubble -->
+      <!-- Message bubble content -->
       <div
-        class="relative max-w-[70%] rounded-lg overflow-hidden"
+        class="rounded-lg overflow-hidden"
         :class="bubbleClass"
         @contextmenu.prevent="showReactionPicker = true"
         @touchstart="onTouchStart"