From 55c5dfec45c75447e8f4d034678dd6016944f9c3 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Tue, 8 Nov 2022 05:33:40 +0400
Subject: [PATCH] Fix fast reaction overlap goto button

---
 src/components/chat/bubbles.ts     |  8 +++++++-
 src/scss/partials/_chatBubble.scss | 19 ++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts
index 6e4e5ed29..19991b8d1 100644
--- a/src/components/chat/bubbles.ts
+++ b/src/components/chat/bubbles.ts
@@ -1211,7 +1211,12 @@ export default class ChatBubbles {
 
   private onBubblesMouseMove = async(e: MouseEvent) => {
     const content = findUpClassName(e.target, 'bubble-content');
-    if(content && !this.chat.selection.isSelecting && !findUpClassName(e.target, 'service')) {
+    if(
+      content &&
+      !this.chat.selection.isSelecting &&
+      !findUpClassName(e.target, 'service') &&
+      !findUpClassName(e.target, 'bubble-beside-button')
+    ) {
       const bubble = findUpClassName(content, 'bubble');
       if(!this.chat.selection.canSelectBubble(bubble)) {
         this.unhoverPrevious();
@@ -1304,6 +1309,7 @@ export default class ChatBubbles {
   }
 
   private setHoverVisible(hoverReaction: HTMLElement, visible: boolean) {
+    hoverReaction.parentElement.classList.toggle('hover-reaction-visible', visible);
     SetTransition(hoverReaction, 'is-visible', visible, 200, visible ? undefined : () => {
       hoverReaction.remove();
     }, 2);
diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss
index 424008186..c77163178 100644
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@@ -331,6 +331,16 @@ $bubble-beside-button-width: 38px;
     html.is-touch body:not(.no-select) .chat:not(.no-forwards) .bubbles.is-selecting & { // * need no-select on body because chat-input transforms in channels
       user-select: text;
     }
+
+    &.hover-reaction-visible {
+      .bubble-beside-button {
+        transform: translateX(1.125rem);
+
+        .bubble.is-out & {
+          transform: translateX(-1.125rem);
+        }
+      }
+    }
   }
 
   &-hover-reaction {
@@ -338,7 +348,8 @@ $bubble-beside-button-width: 38px;
     --offset: calc(var(--size) * -.75);
     position: absolute;
     right: var(--offset);
-    bottom: -.125rem;
+    // bottom: -.0625rem;
+    bottom: 0;
     width: var(--size);
     height: 1.625rem;
     border-radius: var(--size);
@@ -471,13 +482,14 @@ $bubble-beside-button-width: 38px;
     //background: rgba(0, 0, 0, .16);
     background: var(--message-highlightning-color);
     cursor: pointer;
+    transform: translateX(0);
 
     html.no-touch & {
       opacity: 0;
     }
 
     html.no-touch body.animation-level-2 & {
-      transition: opacity .2s ease-in-out;
+      transition: opacity .2s ease-in-out, transform .2s ease-in-out;
     }
   }
 
@@ -2243,7 +2255,8 @@ $bubble-beside-button-width: 38px;
         bottom: 0 !important;
       } */
 
-      &:after {
+      &:after,
+      .document-container:last-of-type .document-selection {
         bottom: -#{$bubble-overflow};
       }
     }