From b589fc18a23070369ec9072e438d4b8cd5961401 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Wed, 11 Sep 2024 16:08:46 +0200
Subject: [PATCH] feat: add styles to support dialog display in
 stream-chat-react

---
 src/v2/styles/DIalog/Dialog-layout.scss              |  8 ++++++++
 src/v2/styles/Message/Message-layout.scss            |  8 ++++++++
 .../MessageReactionsSelector-layout.scss             | 12 ++++++++++++
 src/v2/styles/index.layout.scss                      |  1 +
 4 files changed, 29 insertions(+)
 create mode 100644 src/v2/styles/DIalog/Dialog-layout.scss

diff --git a/src/v2/styles/DIalog/Dialog-layout.scss b/src/v2/styles/DIalog/Dialog-layout.scss
new file mode 100644
index 0000000..970bb80
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/Message/Message-layout.scss
index 24c7320..8e59704 100644
--- a/src/v2/styles/Message/Message-layout.scss
+++ b/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;
diff --git a/src/v2/styles/MessageReactions/MessageReactionsSelector-layout.scss b/src/v2/styles/MessageReactions/MessageReactionsSelector-layout.scss
index 8217dee..0fa2ffd 100644
--- a/src/v2/styles/MessageReactions/MessageReactionsSelector-layout.scss
+++ b/src/v2/styles/MessageReactions/MessageReactionsSelector-layout.scss
@@ -68,3 +68,15 @@
     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;
+}
+
+.str-chat__message--me, .str-chat__message--other {
+  .str-chat-react__message-reaction-selector {
+    inset-inline-start: unset;
+  }
+}
diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss
index c8a4a4f..72c2be5 100755
--- a/src/v2/styles/index.layout.scss
+++ b/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';