diff --git a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js index 3138692604..b98f904be7 100644 --- a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js +++ b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js @@ -79,7 +79,7 @@ export const getBubbleStyles = (theme) => { display: flex; position: absolute; bottom: calc(100% - 20px); - left: calc(100% - 20px); + left: calc(100% - 10px); z-index: 1101; } `, @@ -171,7 +171,7 @@ export const getBubbleStylesMe = (theme) => { toolboxContainerMe: css` .ec-message-body:hover & { left: auto; - right: calc(100% - 20px); + right: calc(100% - 10px); } `, diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index 5cdf333662..d7ba1711a3 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/packages/react/src/views/Message/Message.styles.js @@ -350,6 +350,15 @@ export const getMessageToolboxStyles = (theme) => { gap: 0.25rem; padding: 0.25rem; border-radius: ${theme.radius}; + &::before { + content: ""; + position: absolute; + bottom: 100%; + left: 0; + right: 0; + height: 5px; + background: transparent; + } `, emojiPickerStyles: css` diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js index 75bdc7467d..7ca4fb0654 100644 --- a/packages/react/src/views/Message/MessageToolbox.js +++ b/packages/react/src/views/Message/MessageToolbox.js @@ -259,7 +259,7 @@ export const MessageToolbox = ({