💄 Change eventcard padding and layout #2208 (#2229)

Note, in prod, all three fields are filled, so the gap between the description, place and date and title is not that big as it appears in test

web/pageComponents/cards/EventsCard.tsx

@@ -15,13 +15,14 @@ import type { EventCardData, EventDateType } from '../../types/types'
 import type { PortableTextBlock } from '@portabletext/types'
 import { twMerge } from 'tailwind-merge'
 
-const { Text, Media, Action, StyledLandscapeCard } = Card
+const { Text, Media, StyledLandscapeCard } = Card
 
 const StyledCard = styled(Card)`
   height: var(--height);
   /* For the landscape variant, we don't want the title
   column to be too wide*/
   --column-sizes: 40% 1fr;
+  justify-content: space-between;
 `
 
 const StyledMedia = styled(Media)`
@@ -89,9 +90,7 @@ const SmallText = styled.span`
 const ActionContainer = styled.div`
   display: flex;
   gap: var(--space-small);
-  ${StyledLandscapeCard} & {
-    margin-top: var(--space-large);
-  }
+  margin-top: var(--space-large);
 `
 
 const TextInfoWrapper = styled.div``
@@ -114,7 +113,7 @@ const EventsCard = ({ data, hasSectionTitle, className = '', orientation = 'port
       orientation={orientation}
       style={
         {
-          '--height': 'auto',
+          '--height': '100%',
           '--card-padding': '0 0 var(--space-medium) 0',
         } as CSSProperties
       }
@@ -176,15 +175,8 @@ const EventsCard = ({ data, hasSectionTitle, className = '', orientation = 'port
             )}
           </Detail>
         </TextInfoWrapper>
-        {orientation === 'landscape' && (
-          <Actions slug={slug} title={plainTitle} location={location} eventDate={eventDate} />
-        )}
+        <Actions slug={slug} title={plainTitle} location={location} eventDate={eventDate} />
       </StyledText>
-      {orientation == 'portrait' && (
-        <Action>
-          <Actions slug={slug} title={plainTitle} location={location} eventDate={eventDate} />
-        </Action>
-      )}
     </StyledCard>
   )
 }