wip: full display of mobile hard coded

packages/instant/public/index.html

@@ -13,7 +13,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            /*height: 100vh;*/
         }
 
         body {

packages/instant/src/components/order_details.tsx

@@ -23,7 +23,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
         const ethTokenFee = buyQuoteAccessor.feeEthAmount();
         const totalEthAmount = buyQuoteAccessor.totalEthAmount();
         return (
-            <Container padding="20px" width="100%">
+            <Container padding="20px" width="100%" flexGrow={1}>
                 <Container marginBottom="10px">
                     <Text
                         letterSpacing="1px"

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')}

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')}

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)`

packages/instant/src/components/zero_ex_instant_container.tsx

@@ -14,6 +14,7 @@ import { zIndex } from '../style/z_index';
 import { SlideAnimationState } from './animations/slide_animation';
 import { SlidingPanel } from './sliding_panel';
 import { Container, Flex } from './ui';
+
 export interface ZeroExInstantContainerProps {}
 export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
@@ -25,7 +26,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     };
     public render(): React.ReactNode {
         return (
-            <Container width="350px" position="relative">
+            <Container width="350px" height="100%" position="relative">
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>
@@ -36,8 +37,9 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                     borderRadius="3px"
                     hasBoxShadow={true}
                     overflow="hidden"
+                    height="100%"
                 >
-                    <Flex direction="column" justify="flex-start">
+                    <Flex direction="column" height="100%" justify="flex-start">
                         <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
                         <SelectedAssetBuyOrderProgress />
                         <LatestBuyQuoteOrderDetails />