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..26393d0 100644 --- a/src/v2/styles/MessageReactions/MessageReactionsSelector-layout.scss +++ b/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; + } +} 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';