fix(ui-modal): fill the available space if fullscreen prop is set

Author: joyenjoyer

packages/ui-modal/src/Modal/index.tsx

@@ -176,7 +176,9 @@ class Modal extends Component<ModalProps, ModalState> {
     // this is needed to apply a media query breakpoint
     const wrappedHeaderAndBody =
       headerAndBody.length > 0 ? (
-        <div css={styles?.joinedHeaderAndBody}>{headerAndBody}</div>
+        <div key="header-and-body" css={styles?.joinedHeaderAndBody}>
+          {headerAndBody}
+        </div>
       ) : null
 
     return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others]

packages/ui-modal/src/Modal/styles.ts

@@ -114,7 +114,7 @@ const generateStyle = (
       display: 'flex',
       flexDirection: 'column',
       overflow: 'hidden',
-
+      flex: '1 1 auto',
       // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
       '@media (max-height: 20rem)': {
         overflowY: 'auto',