fix broken styles in safari

mutoo · Jan 30, 2024 · d884c97 · d884c97
1 parent 0de7d62
commit d884c97
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/app/index.ejs b/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>

diff --git a/app/pages/Critterpedia/components/hour-picker.js b/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);
             }}

diff --git a/app/pages/Critterpedia/components/month-picker.js b/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);
             }}