fix: make close button visible on small devices (#2880)

Unleash · Jan 11, 2023 · 3e4e0e4 · 3e4e0e4
1 parent 0d238cd
commit 3e4e0e4
Showing 1 changed file with 9 additions and 9 deletions.
diff --git 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>