wip: full display of mobile hard coded

3 files changed, 7 insertions, 2 deletions

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index a0a187e5f..228085f51 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -33,13 +33,16 @@ export interface ContainerProps {
     cursor?: string;
     overflow?: string;
     darkenOnHover?: boolean;
+    flexGrow?: string | number;
 }
 
+// TODO Dont commit flex grow
 export const Container =
     styled.div <
     ContainerProps >
     `
     box-sizing: border-box;
+    ${props => cssRuleIfExists(props, 'flex-grow')}
     ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
     ${props => cssRuleIfExists(props, 'top')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 29c6511bb..57abd8b5b 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -10,6 +10,7 @@ export interface FlexProps {
     height?: string;
     backgroundColor?: ColorOption;
     inline?: boolean;
+    flexGrow?: number | string;
 }
 
 export const Flex =
@@ -19,6 +20,7 @@ export const Flex =
     display: ${props => (props.inline ? 'inline-flex' : 'flex')};
     flex-direction: ${props => props.direction};
     flex-wrap: ${props => props.flexWrap};
+    ${props => cssRuleIfExists(props, 'flexGrow')}
     justify-content: ${props => props.justify};
     align-items: ${props => props.align};
     ${props => cssRuleIfExists(props, 'width')}
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f1706c874..e930ffacd 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -14,11 +14,11 @@ export interface OverlayProps {
 }
 
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
-    <Flex height="100vh" className={className}>
+    <Flex className={className}>
         <Container position="absolute" top="0px" right="0px">
             <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
-        <div>{children}</div>
+        <Container height="100%">{children}</Container>
     </Flex>
 );
 export const Overlay = styled(PlainOverlay)`