fix mobile flex 100vh layouts

Author: pwfisher

explorer/components/DayPage.tsx

@@ -61,19 +61,22 @@ const Container = styled.main.attrs({ className: 'Explorer__DrawingPage__Contain
 `
 
 const DayHeading = styled.h1.attrs({ className: 'Explorer__DayPage__DayHeading'})`
+  flex: 0 0 auto;
   font-size: 32px;
   padding: 12px 16px;
   text-align: center;
 `
 
 const DrawingSection = styled.section.attrs({ className: 'Explorer__DayPage__DrawingSection'})`
+  flex: 1 1 0;
   overflow: scroll;
   text-align: center;
 `
 
 const NavBar = styled.nav.attrs({ className: 'Explorer__DrawingPage__Header'})`
   color: #BBB;
   display: flex;
+  flex: 0 0 auto;
   justify-content: space-between;
   font-size: 18px;
   font-weight: bold;

explorer/components/DrawingPage.tsx

@@ -62,14 +62,15 @@ const Container = styled.main.attrs({ className: 'Explorer__DrawingPage__Contain
 `
 
 const Title = styled.h1.attrs({ className: 'Explorer__DrawingPage__Title'})`
+  flex: 0 0 auto;
   font-size: 32px;
   font-weight: bold;
   padding: 16px 24px;
   text-align: center;
 `
 
 const ImageWrap = styled.figure.attrs({ className: 'Explorer__DrawingPage__ImageWrap'})`
-  flex-grow: 1;
+  flex: 1 1 0;
   position: relative;
 `
 
@@ -84,6 +85,7 @@ const Image = styled.img.attrs({ className: 'Explorer__DrawingPage__Image'})`
 const NavBar = styled.nav.attrs({ className: 'Explorer__DrawingPage__Header'})`
   color: #BBB;
   display: flex;
+  flex: 0 0 auto;
   justify-content: space-between;
   font-size: 18px;
   font-weight: bold;