From d941901e3281fdb2fd0f9a9b3b23947f05b1c56e Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 14:26:15 -0800
Subject: Hide X when small

---
 packages/instant/src/components/ui/container.tsx | 4 ++--
 packages/instant/src/components/ui/overlay.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/instant/src/components')

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index d276e0603..9ec875cf3 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -6,7 +6,7 @@ import { ColorOption, styled } from '../../style/theme';
 import { cssRuleIfExists } from '../../style/util';
 
 export interface ContainerProps {
-    display?: string;
+    display?: MediaChoice;
     position?: string;
     top?: string;
     right?: string;
@@ -45,7 +45,6 @@ export const Container =
     `
     box-sizing: border-box;
     ${props => cssRuleIfExists(props, 'flex-grow')}
-    ${props => cssRuleIfExists(props, 'display')}
     ${props => cssRuleIfExists(props, 'position')}
     ${props => cssRuleIfExists(props, 'top')}
     ${props => cssRuleIfExists(props, 'right')}
@@ -68,6 +67,7 @@ export const Container =
     ${props => cssRuleIfExists(props, 'cursor')}
     ${props => cssRuleIfExists(props, 'overflow')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
+    ${props => stylesForMedia('display', props.display || 'initial')}
     ${props => stylesForMedia('width', props.width || 'auto')}
     ${props => stylesForMedia('height', props.height || 'auto')}
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 0fde995e0..7110ee70f 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -15,7 +15,7 @@ export interface OverlayProps {
 
 const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
     <Flex height="100vh" className={className}>
-        <Container position="absolute" top="0px" right="0px">
+        <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
             <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
         </Container>
         <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
-- 
cgit v1.2.3