From 3e4e0e4df9f3fba18943f5da61a62e72688b2678 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 11 Jan 2023 15:10:43 +0100
Subject: [PATCH] fix: make close button visible on small devices (#2880)

---
 .../common/SidebarModal/SidebarModal.tsx       | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/common/SidebarModal/SidebarModal.tsx b/frontend/src/component/common/SidebarModal/SidebarModal.tsx
index cc0990e35e..64d085ec7b 100644
--- a/frontend/src/component/common/SidebarModal/SidebarModal.tsx
+++ b/frontend/src/component/common/SidebarModal/SidebarModal.tsx
@@ -29,6 +29,13 @@ const FixedWidthContentWrapper = styled(ModalContentWrapper)({
     width: 1300,
 });
 
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+    zIndex: 1,
+    position: 'absolute',
+    top: theme.spacing(3),
+    right: theme.spacing(3),
+}));
+
 export const BaseModal: FC<ISidebarModalProps> = ({
     open,
     onClose,
@@ -67,16 +74,9 @@ export const DynamicSidebarModal: FC<ISidebarModalProps> = props => {
         <BaseModal {...props}>
             <ModalContentWrapper>
                 <Tooltip title="Close" arrow describeChild>
-                    <IconButton
-                        sx={theme => ({
-                            position: 'absolute',
-                            top: theme.spacing(3),
-                            right: theme.spacing(3),
-                        })}
-                        onClick={props.onClose}
-                    >
+                    <StyledIconButton onClick={props.onClose}>
                         <CloseIcon />
-                    </IconButton>
+                    </StyledIconButton>
                 </Tooltip>
                 {props.children}
             </ModalContentWrapper>