diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index 9f6a857821..d9cd0d7295 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -68,6 +68,17 @@ } } +.elementDropdownMenu { + direction: ltr; +} + +.menuArrowButton { + display: none; +} +.menuArrowButtonVisible { + display: block; +} + .messageTextWithReply { padding: 0.25rem 0rem 0.5rem; } @@ -220,10 +231,6 @@ } } -.menuArrowButton { - display: none; -} - .highlighted { animation: highlighted 10s forwards; border: 0.06rem solid $c-pink-active-feed-cards; diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx index 7ff3b2bec9..e49ce29b03 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx @@ -448,7 +448,10 @@ export default function ChatMessage({ isControlledDropdown={false} isOpen={isMenuOpen} styles={{ - menuButton: styles.menuArrowButton, + menu: styles.elementDropdownMenu, + menuButton: classNames(styles.menuArrowButton, { + [styles.menuArrowButtonVisible]: isMenuOpen, + }), }} feedItemId={feedItemId} onDelete={onMessageDelete} diff --git a/src/shared/components/ElementDropdown/ElementDropdown.tsx b/src/shared/components/ElementDropdown/ElementDropdown.tsx index a9860c34f6..ce34c50ab9 100644 --- a/src/shared/components/ElementDropdown/ElementDropdown.tsx +++ b/src/shared/components/ElementDropdown/ElementDropdown.tsx @@ -340,7 +340,7 @@ const ElementDropdown: FC = ({ menuButton: classNames(styles?.menuButton, { "element-dropdown__menu-button--transparent": transparent, }), - menu: "element-dropdown__menu", + menu: classNames("element-dropdown__menu", styles?.menu), menuItem: "element-dropdown__menu-item", }} />