fix: application approved reservations styling

City-of-Helsinki · Dec 18, 2024 · bbfe86b · bbfe86b
1 parent 29fb9e0
commit bbfe86b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/apps/ui/components/AccordionWithIcons.tsx b/apps/ui/components/AccordionWithIcons.tsx
@@ -29,12 +29,17 @@ const ClosedAccordionWrapper = styled.div`
   gap: var(--spacing-s);
 
   background-color: var(--color-black-10);
-  padding: var(--spacing-s);
+  padding: var(--spacing-m);
+  @media (min-width: ${breakpoints.m}) {
+    padding: var(--spacing-l);
+  }
 `;
 
 const IconListWrapper = styled.ul`
   display: grid;
   gap: var(--spacing-xs);
+  padding: 0;
+  margin: 0;
 
   grid-row: subgrid;
   grid-column: 1 / -1;

diff --git a/apps/ui/components/application/ApprovedReservations.tsx b/apps/ui/components/application/ApprovedReservations.tsx
@@ -329,6 +329,14 @@ type ReservationUnitTableElem = {
   time: string;
 };
 
+/// Have to asign min-height on desktop otherwise the table rows are too small
+/// can't assign it on mobile because it's card (and 44px is too much)
+const StyledLinkLikeButton = styled(LinkLikeButton)`
+  @media (min-width: ${BREAKPOINT}) {
+    min-height: 44px;
+  }
+`;
+
 function ReservationUnitTable({
   reservationUnits,
 }: {
@@ -379,21 +387,18 @@ function ReservationUnitTable({
       key: "helpLink",
       headerName: t("application:view.helpModal.title"),
       transform: ({ reservationUnit }: ReservationUnitTableElem) => (
-        <LinkLikeButton
-          onClick={() => setModal(reservationUnit)}
-          // Match the size of a small button
-          style={{ minHeight: "44px" }}
-        >
+        <StyledLinkLikeButton onClick={() => setModal(reservationUnit)}>
           <IconInfoCircle aria-hidden="true" />
           {isMobile
             ? t("application:view.helpLinkLong")
             : t("application:view.helpLink")}
-        </LinkLikeButton>
+        </StyledLinkLikeButton>
       ),
       isSortable: false,
     },
   ];
 
+
   const getTranslation = (
     elem: ModalT | null,
     field: "name" | "reservationConfirmedInstructions"

diff --git a/packages/common/styles/buttonCss.ts b/packages/common/styles/buttonCss.ts
@@ -68,7 +68,7 @@ export const LinkLikeButton = styled.button`
   cursor: pointer;
   font-size: var(--content-font-size);
   line-height: var(--content-line-height);
-  padding: var(--spacing-3-xs);
+  padding: 0;
   text-decoration: underline;
   &:hover {
     text-decoration: none;