fix: reservation card column overscaling on desktop

Author: joonatank

apps/ui/components/reservation/ReservationCancellation.tsx

@@ -84,21 +84,8 @@ type FormValues = {
 
 const StyledInfoCard = styled(ReservationInfoCard)`
   @media (min-width: ${breakpoints.m}) {
-    grid-row: 1 / span 2;
-    grid-column: -1;
-  }
-`;
-
-const Wrapper = styled(Flex)`
-  @media (min-width: ${breakpoints.m}) {
-    grid-row: 2 / -1;
-    grid-column: 1 / span 2;
-  }
-`;
-
-const TitleSection = styled.div`
-  @media (min-width: ${breakpoints.m}) {
-    grid-column: 1 / span 2;
+    grid-row: 1 / -1;
+    grid-column: 2;
   }
 `;
 
@@ -176,12 +163,12 @@ export function ReservationCancellation(props: Props): JSX.Element {
 
   return (
     <ReservationPageWrapper>
-      <TitleSection>
+      <div>
         <H1 $noMargin>{title}</H1>
         <p>{ingress}</p>
-      </TitleSection>
+      </div>
       <StyledInfoCard reservation={reservation} type="confirmed" />
-      <Wrapper>
+      <Flex>
         {!isSuccess ? (
           <>
             <p style={{ margin: 0 }}>{t("reservations:cancelInfoBody")}</p>
@@ -229,7 +216,7 @@ export function ReservationCancellation(props: Props): JSX.Element {
             <ReturnLinkList apiBaseUrl={apiBaseUrl} />
           </>
         )}
-      </Wrapper>
+      </Flex>
     </ReservationPageWrapper>
   );
 }

apps/ui/components/reservations/styles.tsx

@@ -2,6 +2,8 @@ import styled from "styled-components";
 import { breakpoints } from "common/src/common/style";
 import { H1 } from "common/src/common/typography";
 
+const CARD_COLUMN_SIZE = 390;
+
 export const ReservationPageWrapper = styled.div<{ $nRows?: number }>`
   display: grid;
   grid-template-columns: 1fr;
@@ -12,7 +14,7 @@ export const ReservationPageWrapper = styled.div<{ $nRows?: number }>`
   padding: 0;
 
   @media (min-width: ${breakpoints.m}) {
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 1fr ${CARD_COLUMN_SIZE}px;
   }
 `;
 

apps/ui/pages/reservations/[id]/confirmation.tsx

@@ -33,13 +33,6 @@ import { breakpoints } from "common";
 import { InlineStyledLink } from "@/styles/util";
 import { BackLinkList } from "@/components/reservation/CancelledLinkSet";
 
-const StyledInfoCard = styled(ReservationInfoCard)`
-  @media (min-width: ${breakpoints.m}) {
-    grid-row: 1 / span 2;
-    grid-column: -1;
-  }
-`;
-
 function Confirmation({ apiBaseUrl, reservation }: PropsNarrowed) {
   const { t } = useTranslation();
   const routes = [
@@ -63,7 +56,7 @@ function Confirmation({ apiBaseUrl, reservation }: PropsNarrowed) {
     <>
       <BreadcrumbWrapper route={routes} />
       <ReservationPageWrapper $nRows={4}>
-        <StyledInfoCard reservation={reservation} type="confirmed" />
+        <ReservationInfoCard reservation={reservation} type="confirmed" />
         <ReservationConfirmation
           apiBaseUrl={apiBaseUrl}
           reservation={reservation}
@@ -76,7 +69,6 @@ function Confirmation({ apiBaseUrl, reservation }: PropsNarrowed) {
 const Wrapper = styled(Flex)`
   @media (min-width: ${breakpoints.m}) {
     grid-row: 1 / -1;
-    grid-column: span 2;
   }
 `;