feat: add styles to support dialog display in stream-chat-react (#308)

Author: MartinCupela

src/v2/styles/Dialog/Dialog-layout.scss

@@ -0,0 +1,8 @@
+.str-chat__dialog-overlay {
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  height: var(--str-chat__dialog-overlay-height);
+  width: 100%;
+  z-index: 2;
+}

src/v2/styles/Message/Message-layout.scss

@@ -350,6 +350,14 @@
   }
 }
 
+// Message options display - third mode: they appear, when explicitly marked as active
+.str-chat__message-inner {
+  .str-chat__message-options.str-chat__message-options--active {
+    display: flex;
+  }
+}
+
+
 .str-chat__message-inner {
   .str-chat__message-options {
     display: none;

src/v2/styles/MessageReactions/MessageReactionsSelector-layout.scss

@@ -68,3 +68,19 @@
     inset-inline-start: 0;
   }
 }
+
+// the React SDK positions the reaction selector with popperjs
+.str-chat-react__message-reaction-selector {
+  position: static;
+  inset-block-end: unset;
+
+  ul {
+    margin: 0;
+  }
+}
+
+.str-chat__message--me, .str-chat__message--other {
+  .str-chat-react__message-reaction-selector {
+    inset-inline-start: unset;
+  }
+}

src/v2/styles/index.layout.scss

@@ -15,6 +15,7 @@
 @use 'ChannelSearch/ChannelSearch-layout';
 @use 'common/CTAButton/CTAButton-layout';
 @use 'common/CircleFAButton/CircleFAButton-layout';
+@use 'Dialog/Dialog-layout';
 @use 'EditMessageForm/EditMessageForm-layout';
 @use 'ImageCarousel/ImageCarousel-layout';
 @use 'Icon/Icon-layout';