Fixed close button placement

lyytioy · Apr 19, 2022 · 3ac7b0f · 3ac7b0f
1 parent 7222123
commit 3ac7b0f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -29,13 +29,15 @@ const Dialog = ({
 }: DialogProps): JSX.Element => {
   return (
     <MuiDialog fullScreen={fullScreen} open={open} onClose={onClose} {...props}>
-      <MuiDialogTitle>
+      <MuiDialogTitle sx={{ pr: 8 }}>
         {dialogTitle}
         <Button
           onClick={onClose as MouseEventHandler<HTMLButtonElement>}
           sx={{
-            padding: '12px',
             borderRadius: '50%',
+            position: 'absolute',
+            top: 10,
+            right: 8,
           }}
         >
           <Close fontSize="small" />

diff --git a/stories/Feedback/Dialog.stories.tsx b/stories/Feedback/Dialog.stories.tsx
@@ -76,6 +76,7 @@ export default {
       </>
     ),
     dialogTitle: 'This is the dialog title',
+    fullWidth: true,
   },
 } as Meta;
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,6 +76,7 @@ export default { @@
           </>
         ),
         dialogTitle: 'This is the dialog title',
+        fullWidth: true,
       },
     } as Meta;
@@ Expand Down @@