fix broken styles in safari

Author: mutoo

app/index.ejs

@@ -12,6 +12,7 @@
 
     <!-- Allow installing the app to the homescreen -->
     <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#fffae4" />
 
     <link rel="icon" type="image/png" href="favicon.png" />
     <title>Critterpedia Plus</title>

app/pages/Critterpedia/components/hour-picker.js

@@ -74,10 +74,12 @@ const HourPicker = ({ hour, onChange, ...props }) => {
   return (
     <Box {...props}>
       <Flex justifyContent="flex-start" mb="md">
-        <Heading mr="md">Hour</Heading>
+        <Heading mr="md" sx={{ flex: '0 0 auto' }}>
+          Hour
+        </Heading>
         {hour !== null ? (
           <Box
-            sx={{ cursor: 'pointer' }}
+            sx={{ cursor: 'pointer', flex: '1 1 auto' }}
             onClick={() => {
               onChange(null);
             }}

app/pages/Critterpedia/components/month-picker.js

@@ -91,10 +91,12 @@ const MonthPicker = ({ month, onChange, ...props }) => {
   return (
     <Box {...props}>
       <Flex justifyContent="flex-start" mb="md">
-        <Heading mr="md">Month</Heading>
+        <Heading mr="md" sx={{ flex: '0 0 auto' }}>
+          Month
+        </Heading>
         {month !== null ? (
           <Box
-            sx={{ cursor: 'pointer' }}
+            sx={{ cursor: 'pointer', flex: '1 1 auto' }}
             onClick={() => {
               onChange(null);
             }}