From 82f96d5d213574e14441aaf5c6c116985182a17a Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Tue, 14 May 2024 10:08:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Change=20eventcard=20padding=20a?=
 =?UTF-8?q?nd=20layout=20#2208=20(#2229)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/web/pageComponents/cards/EventsCard.tsx b/web/pageComponents/cards/EventsCard.tsx
index 62d66c1d4..5a7d56b6f 100644
--- a/web/pageComponents/cards/EventsCard.tsx
+++ b/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>
   )
 }