add styles to modal content to spread through the whole content container

Author: dantovska

redisinsight/ui/src/components/form-dialog/FormDialog.styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { Modal } from 'uiSrc/components/base/display/modal'
+
+export const StyledFormDialogContent = styled(Modal.Content.Compose)`
+  width: 900px !important;
+  height: 700px !important;
+
+  max-width: calc(100vw - 120px) !important;
+  max-height: calc(100vh - 120px) !important;
+
+  // Flex the modal content to fill the whole available space
+  > [data-role='dialog-hub'] {
+    flex: 1;
+  }
+`

redisinsight/ui/src/components/form-dialog/FormDialog.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import cx from 'classnames'
 
 import { Nullable } from 'uiSrc/utils'
 import { CancelIcon } from 'uiSrc/components/base/icons'
 import { Modal } from 'uiSrc/components/base/display'
-import styles from './styles.module.scss'
+
+import { StyledFormDialogContent } from './FormDialog.styles'
 
 export interface Props {
   isOpen: boolean
@@ -22,16 +22,16 @@ const FormDialog = (props: Props) => {
 
   return (
     <Modal.Compose open={isOpen}>
-      <Modal.Content.Compose
+      <StyledFormDialogContent
         persistent
-        className={cx(styles.modal, className)}
+        className={className}
         onCancel={onClose}
       >
         <Modal.Content.Close icon={CancelIcon} onClick={onClose} />
         <Modal.Content.Header.Title>{header}</Modal.Content.Header.Title>
         <Modal.Content.Body content={children} />
         <Modal.Content.Footer.Compose>{footer}</Modal.Content.Footer.Compose>
-      </Modal.Content.Compose>
+      </StyledFormDialogContent>
     </Modal.Compose>
   )
 }