fix(modals): change StyledModal's max-height, when viewport max-height is less than 400 CSS px (#2034)

Author: jgorfine-zendesk

packages/modals/src/styled/StyledModal.spec.tsx

@@ -22,6 +22,10 @@ describe('StyledModal', () => {
     expect(container.firstChild).not.toHaveStyleRule('direction');
     expect(container.firstChild).not.toHaveStyleRule('animation-duration', '0.3s');
     expect(container.firstChild).not.toHaveStyleRule('animation-timing-function', 'ease-in-out');
+    expect(container.firstChild).toHaveStyleRule('max-height', 'calc(100vh - 96px)');
+    expect(container.firstChild).toHaveStyleRule('max-height', 'calc(100vh - 48px)', {
+      media: `(max-height:  399px)`
+    });
   });
 
   it('renders RTL styling if provided', () => {

packages/modals/src/styled/StyledModal.ts

@@ -100,7 +100,7 @@ export const StyledModal = styled.div.attrs<IStyledModalProps>({
     top: ${props => props.theme.space.base * 6}px;
     bottom: auto;
     margin-bottom: ${props => props.theme.space.base * 6}px;
-    max-height: none;
+    max-height: calc(100vh - ${props => props.theme.space.base * 12}px);
   }
 
   @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {