fix: Dialog, Modal and Popover (#1245)

interlay · May 31, 2023 · 252285f · 252285f · vercel · May 31, 2023
1 parent aca4e7d
commit 252285f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/component-library/Dialog/Dialog.style.tsx b/src/component-library/Dialog/Dialog.style.tsx
@@ -16,6 +16,7 @@ const StyledDialog = styled.section<StyledDialogProps>`
   border: ${theme.border.default};
   border-radius: ${theme.rounded.md};
   color: ${theme.colors.textPrimary};
+  max-width: 100%;
   width: ${({ $size }) => theme.dialog[$size].width};
   display: flex;
   flex-direction: column;

diff --git a/src/component-library/Modal/Modal.style.tsx b/src/component-library/Modal/Modal.style.tsx
@@ -36,6 +36,7 @@ const StyledWrapper = styled.div<StyledModalProps>`
 `;
 
 const StyledModal = styled.div<StyledModalProps>`
+  max-width: calc(100% - ${theme.spacing.spacing12});
   max-height: ${({ $isCentered }) => $isCentered && theme.modal.maxHeight};
   margin: ${({ $isCentered }) => ($isCentered ? 0 : theme.spacing.spacing16)} ${theme.spacing.spacing6};
 

diff --git a/src/component-library/Popover/Popover.style.tsx b/src/component-library/Popover/Popover.style.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import { getOverlayPlacementCSS, overlayCSS } from '../css/overlay';
+import { theme } from '../theme';
 import { Placement } from '../utils/prop-types';
 
 type StyledPopoverProps = {
@@ -13,8 +14,9 @@ const StyledPopover = styled.div<StyledPopoverProps>`
   flex-direction: column;
   box-sizing: border-box;
 
-  min-width: 32px;
-  min-height: 32px;
+  min-width: ${theme.spacing.spacing8};
+  min-height: ${theme.spacing.spacing8};
+  max-width: calc(100% - ${theme.spacing.spacing8});
 
   position: absolute;