Adjust calendar spacing and size

Author: trybick

front/src/features/calendar/CalendarPage.tsx

@@ -124,7 +124,7 @@ const CalendarPage = () => {
 
       <Box
         m="14px auto 20px"
-        maxW="1600px"
+        maxW="1400px"
         p={{ base: '0', md: '10px 30px' }}
         w={{ base: '90%', md: '100%' }}
       >

front/src/features/calendar/DesktopCalendarEventPopover.tsx

@@ -113,7 +113,7 @@ const DesktopCalendarEventPopover = (props: Props) => {
                       </Text>
                     </Flex>
                   )}
-                  {runtime && !isMulipleEvent && (
+                  {!!runtime && !isMulipleEvent && (
                     <Flex align="center" gap="2px">
                       <Icon
                         alignSelf="center"

front/src/theme/globalCss.ts

@@ -6,10 +6,9 @@ const customColors = {
 const whiteWithOpacity = (opacity: number) => `rgba(255, 255, 255, ${opacity})`;
 
 const desktopCalendarStyles = {
-  // Height of each table row. Setting this height along with
-  // <FullCalendar height="auto" /> seems like a good balance.
+  // Height of each table row. Works with `height: auto` on <FullCalendar>.
   '.fc-scrollgrid tbody:first-of-type tr': {
-    height: '170px',
+    height: 'clamp(90px, 15vh, 190px)',
   },
 
   // Add vertical space between calendar events