diff --git a/src/components/chat-view-container/chat-view.tsx b/src/components/chat-view-container/chat-view.tsx index 3f895ed6f..d1d905100 100644 --- a/src/components/chat-view-container/chat-view.tsx +++ b/src/components/chat-view-container/chat-view.tsx @@ -107,7 +107,8 @@ export class ChatView extends React.Component { this.setState({ lightboxMedia, lightboxStartIndex, isLightboxOpen: true }); }; - closeLightBox = () => { + closeLightBox = (e) => { + e?.stopPropagation?.(); this.setState({ isLightboxOpen: false }); }; diff --git a/src/components/lightbox/index.tsx b/src/components/lightbox/index.tsx index 7ea2087ef..7be6bf1ab 100644 --- a/src/components/lightbox/index.tsx +++ b/src/components/lightbox/index.tsx @@ -10,7 +10,7 @@ export interface LightboxProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any items: any[]; startingIndex?: number; - onClose?: () => void; + onClose?: (e?: React.MouseEvent) => void; provider: { // eslint-disable-next-line @typescript-eslint/no-explicit-any fitWithinBox: (media: any) => any; @@ -133,12 +133,28 @@ export const Lightbox = ({ items, startingIndex = 0, onClose, provider }: Lightb onMoveNextRequest={() => setIndex(getNextItemIndex(index))} toolbarButtons={[ !isCurrentItemGif && ( - ), !isCurrentItemGif && ( - ), diff --git a/src/components/lightbox/styles.module.scss b/src/components/lightbox/styles.module.scss index 3e737d270..0014ae2c4 100644 --- a/src/components/lightbox/styles.module.scss +++ b/src/components/lightbox/styles.module.scss @@ -15,12 +15,23 @@ } .ril__toolbar { + z-index: 10000; background: none; } + + .ril__toolbarRightSide { + position: relative; + z-index: 10001; + } + + .ril__outer { + z-index: 9999; + } } } .DownloadButton { + z-index: 10001; width: 40px; height: 35px; cursor: pointer;