fix: layout issues on customer application page

apps/ui/components/AccordionWithIcons.tsx

@@ -1,4 +1,5 @@
 import { breakpoints } from "common";
+import { Flex } from "common/styles/util";
 import { Button, IconAngleDown, IconAngleUp, useAccordion } from "hds-react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
@@ -25,7 +26,7 @@ const Heading = styled.h2<{ as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" }>`
 
 const ClosedAccordionWrapper = styled.div`
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr auto;
   align-items: center;
   gap: var(--spacing-s);
 
@@ -66,11 +67,11 @@ const ButtonListWrapper = styled.div`
   }
 `;
 
-const IconLabel = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-
+const IconLabel = styled(Flex).attrs({
+  $gap: "xs",
+  $align: "center",
+  $direction: "row",
+})`
   /* truncate the first child span while not touch the postfix */
   min-width: 0;
   max-width: 100%;

apps/ui/components/application/ApprovedReservations.tsx

@@ -51,6 +51,7 @@ import { ButtonLikeLink } from "../common/ButtonLikeLink";
 import { AccordionWithIcons } from "../AccordionWithIcons";
 import { CenterSpinner } from "../common/common";
 import { useMedia } from "react-use";
+import { ButtonContainer, Flex } from "common/styles/util";
 
 const N_RESERVATIONS_TO_SHOW = 20;
 
@@ -62,29 +63,26 @@ type Props = {
   application: ApplicationT;
 };
 
-const H3 = styled(H5).attrs({ as: "h3" })`
+const H3 = styled(H5).attrs({
+  as: "h3",
+  $noMargin: true,
+})`
   ${fontMedium}
-  margin: 0;
 `;
 
-const BREAKPOINT = breakpoints.m;
-
-const ListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-m);
-
-  margin-top: var(--spacing-l);
-  @media (width > ${BREAKPOINT}) {
-    margin-top: var(--spacing-xl);
-  }
-`;
+export const BREAKPOINT = breakpoints.m;
 
 // Tables can't do horizontal scroll without wrapping the table in a div
 // NOTE HDS Table can't be styled so have to wrap it in an extra div.
 const TableWrapper = styled.div`
+  /* TODO move this to a more general TableWrapper shared with admin-ui */
   /* Mobile uses cards, so no horizontal scroll */
   @media (width > ${BREAKPOINT}) {
+    /* NOTE this requires using buttons (or other elements with padding) on every row */
+    & tbody > tr > td {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
     & > div {
       overflow-x: auto;
       > table {
@@ -155,16 +153,6 @@ const TableWrapper = styled.div`
   }
 `;
 
-const ButtonContainer = styled.div`
-  display: flex;
-  gap: var(--spacing-s);
-  justify-content: center;
-  flex-direction: row;
-  @media (max-width: ${BREAKPOINT}) {
-    flex-direction: column;
-  }
-`;
-
 function getAesReservationUnits(aes: ApplicationSectionT) {
   return filterNonNullable(
     aes.reservationUnitOptions
@@ -249,7 +237,7 @@ export function ApprovedReservations({ application }: Props) {
   const lang = getLocalizationLang(i18n.language);
 
   return (
-    <ListContainer>
+    <Flex>
       {loading && <CenterSpinner />}
       {app?.applicationSections?.map((aes) => (
         <AccordionWithIcons
@@ -283,7 +271,7 @@ export function ApprovedReservations({ application }: Props) {
           />
         </AccordionWithIcons>
       ))}
-    </ListContainer>
+    </Flex>
   );
 }
 
@@ -397,8 +385,8 @@ function ReservationUnitTable({
       transform: ({ reservationUnit }: ReservationUnitTableElem) => (
         <LinkLikeButton
           onClick={() => setModal(reservationUnit)}
-          // table already includes padding
-          style={{ padding: 0 }}
+          // Match the size of a small button
+          style={{ minHeight: "44px" }}
         >
           <IconInfoCircle aria-hidden="true" />
           {isMobile
@@ -514,6 +502,7 @@ function createReservationUnitLink({
 const CancelButton = styled(Button).attrs({
   theme: "black",
   variant: "supplementary",
+  size: "small",
   iconLeft: <IconCross aria-hidden="true" />,
 })`
   white-space: nowrap;
@@ -758,7 +747,9 @@ export function AllReservations({
   const reservations = sectionToreservations(t, applicationSection);
   return (
     <>
-      <H3 as="h2">{t("application:view.reservationsTab.reservationsTitle")}</H3>
+      <H3 $noMargin>
+        {t("application:view.reservationsTab.reservationsTitle")}
+      </H3>
       <ReservationsTable reservations={reservations} />
     </>
   );
@@ -781,12 +772,12 @@ export function ApplicationSection({
     .slice(0, N_RESERVATIONS_TO_SHOW);
 
   return (
-    <ListContainer>
+    <Flex>
       <H3>{t("application:view.reservationsTab.reservationUnitsTitle")}</H3>
       <ReservationUnitTable reservationUnits={reservationUnits} />
       <H3>{t("application:view.reservationsTab.reservationsTitle")}</H3>
       <ReservationsTable reservations={reservations} />
-      <ButtonContainer>
+      <ButtonContainer $justify="center">
         <ButtonLikeLink
           href={getApplicationSectionPath(
             applicationSection.pk,
@@ -802,6 +793,7 @@ export function ApplicationSection({
           variant="secondary"
           theme="black"
           key="cancel"
+          size="small"
           onClick={() => {
             errorToast({ text: "Not implemented: cancel application" });
           }}
@@ -810,6 +802,6 @@ export function ApplicationSection({
           {t("application:view.reservationsTab.cancelApplication")}
         </Button>
       </ButtonContainer>
-    </ListContainer>
+    </Flex>
   );
 }

apps/ui/components/application/styled.tsx

@@ -5,7 +5,7 @@ import TermsBox from "common/src/termsbox/TermsBox";
 import { breakpoints, fontMedium, fontRegular } from "common";
 import { AccordionWithState } from "@/components/Accordion";
 import { H5 } from "common/src/common/typography";
-import { FullRow } from "common/styles/util";
+import { Flex, FullRow } from "common/styles/util";
 
 export const CheckboxContainer = styled.div`
   margin-top: var(--spacing-m);
@@ -66,11 +66,11 @@ export const ApplicationInfoContainer = styled.div`
   }
 `;
 
-export const InfoItemContainer = styled.div<{ $fullWidth?: boolean }>`
+export const InfoItemContainer = styled(Flex).attrs({
+  align: "flex-end",
+  gap: "none",
+})<{ $fullWidth?: boolean }>`
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-content: flex-end;
   position: relative;
   background: var(--color-white);
   width: 100%;
@@ -92,15 +92,13 @@ export const InfoItemContainer = styled.div<{ $fullWidth?: boolean }>`
   }
 `;
 
-export const InfoItem = styled.div`
+export const InfoItem = styled(Flex).attrs({
+  $align: "stretch",
+})`
   margin: var(--spacing-m) 0;
   height: 100%;
-  display: flex;
   box-sizing: border-box;
   width: 100%;
-  gap: var(--spacing-m);
-  flex-direction: column;
-  align-items: stretch;
   padding: 0;
 
   h3 {

apps/ui/pages/applications/[id]/view/[section]/index.tsx

@@ -9,7 +9,7 @@ import {
   type ApplicationSectionViewQueryVariables,
   ApplicationStatusChoice,
 } from "@gql/gql-types";
-import { H2 } from "common";
+import { H1 } from "common";
 import { AllReservations } from "@/components/application/ApprovedReservations";
 import { gql } from "@apollo/client";
 import { useTranslation } from "next-i18next";
@@ -44,7 +44,7 @@ function ViewAll({ applicationSection }: PropsNarrowed): JSX.Element {
   return (
     <>
       <BreadcrumbWrapper route={route} />
-      <H2 as="h1">{heading}</H2>
+      <H1 $noMargin>{heading}</H1>
       <AllReservations applicationSection={applicationSection} />
     </>
   );

apps/ui/pages/applications/[id]/view/index.tsx

@@ -17,10 +17,23 @@ import {
 } from "@gql/gql-types";
 import { Tabs } from "hds-react";
 import { formatDateTime } from "@/modules/util";
-import { ApprovedReservations } from "@/components/application/ApprovedReservations";
+import {
+  ApprovedReservations,
+  BREAKPOINT,
+} from "@/components/application/ApprovedReservations";
 import { gql } from "@apollo/client";
 import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
 import { H1 } from "common";
+import styled from "styled-components";
+
+const TabPanel = styled(Tabs.TabPanel)`
+  && {
+    margin-top: var(--spacing-l);
+    @media (width > ${BREAKPOINT}) {
+      margin-top: var(--spacing-xl);
+    }
+  }
+`;
 
 function View({ application, tos }: PropsNarrowed): JSX.Element {
   const { t, i18n } = useTranslation();
@@ -43,7 +56,7 @@ function View({ application, tos }: PropsNarrowed): JSX.Element {
   return (
     <>
       <BreadcrumbWrapper route={["/applications", "application"]} />
-      <H1>{applicationRoundName}</H1>
+      <H1 $noMargin>{applicationRoundName}</H1>
       {showReservations ? (
         <>
           <p>
@@ -59,12 +72,12 @@ function View({ application, tos }: PropsNarrowed): JSX.Element {
                 {t("application:view.application")}
               </Tabs.Tab>
             </Tabs.TabList>
-            <Tabs.TabPanel>
+            <TabPanel>
               <ApprovedReservations application={application} />
-            </Tabs.TabPanel>
-            <Tabs.TabPanel>
+            </TabPanel>
+            <TabPanel>
               <ViewApplication application={application} tos={tos} />
-            </Tabs.TabPanel>
+            </TabPanel>
           </Tabs>
         </>
       ) : (