fix: remove unnecessary Tooltip styling (#165)

Part of the [1714](GetStream/stream-chat-react#1714) fix.
GetStream · Aug 29, 2022 · f391c48 · f391c48
1 parent a5e4317
commit f391c48
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 49 deletions.
diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/Message/Message-layout.scss
@@ -179,26 +179,10 @@
     column-gap: var(--str-chat__spacing-0_5);
     position: relative;
 
-    .str-chat__message-status-tooltip-container {
-      display: flex;
-      justify-content: center;
-    }
-
     svg {
       width: calc(var(--str-chat__spacing-px) * 15);
       height: calc(var(--str-chat__spacing-px) * 15);
     }
-
-    .str-chat__tooltip {
-      word-break: normal;
-      display: none;
-    }
-
-    &:hover {
-      .str-chat__tooltip {
-        display: flex;
-      }
-    }
   }
 
   .str-chat__message-replies-count-button-wrapper {

diff --git a/src/v2/styles/MessageReactions/MessageReactions-layout.scss b/src/v2/styles/MessageReactions/MessageReactions-layout.scss
@@ -18,6 +18,7 @@
       justify-content: center;
       align-items: center;
       padding: var(--str-chat__spacing-1_5);
+      position: relative;
 
       button {
         @include utils.button-reset;
@@ -31,16 +32,6 @@
         align-items: center;
         justify-content: center;
       }
-
-      .str-chat__tooltip {
-        display: none;
-      }
-
-      &:hover {
-        .str-chat__tooltip {
-          display: flex;
-        }
-      }
     }
 
     // Only in theme-v1

diff --git a/src/v2/styles/Tooltip/Tooltip-layout.scss b/src/v2/styles/Tooltip/Tooltip-layout.scss
@@ -3,28 +3,7 @@
 .str-chat__tooltip {
   display: flex;
   padding: var(--str-chat__spacing-2);
-}
-
-.str-chat__tooltip:not(.str-chat__tooltip-angular) {
-  $size: 10px;
-
-  min-width: calc(var(--str-chat__spacing-px) * 100px);
-  max-width: calc(var(--str-chat__spacing-px) * 150px);
-  word-break: break-all;
-  position: absolute;
-  bottom: calc(100% + calc(0.8 * #{$size}));
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: calc(-1 * calc(#{$size} / 2));
-    inset-inline-start: calc(50% - calc(#{$size} / 2));
-    width: $size;
-    height: $size;
-    transform: rotate(45deg);
-  }
-}
-
-.str-chat__tooltip-angular {
+  z-index: 1;
   word-break: normal;
+  max-width: calc(var(--str-chat__spacing-px) * 150);
 }