fix: application mobile layout breaking

Author: joonatank

apps/admin-ui/src/helpers/index.ts

@@ -1,8 +1,9 @@
 /// Plain js / ts helper functions
 import { ReservationType, Type } from "common/types/gql-types";
-
 import { addSeconds } from "date-fns";
 
+export { truncate } from "common/src/helpers";
+
 export * from "./date";
 
 export type CollisionInterval = {
@@ -57,6 +58,3 @@ export const reservationToInterval = (
     type: x.type ?? undefined,
   };
 };
-
-export const truncate = (val: string, maxLen: number): string =>
-  val.length > maxLen ? `${val.substring(0, maxLen - 1)}…` : val;

apps/ui/components/application/Page2.tsx

@@ -6,7 +6,11 @@ import styled from "styled-components";
 import { useFormContext } from "react-hook-form";
 import type { ApplicationEventSchedulePriority } from "common/types/common";
 import { Priority, type ApplicationNode } from "common/types/gql-types";
-import { filterNonNullable, getLocalizationLang } from "common/src/helpers";
+import {
+  filterNonNullable,
+  getLocalizationLang,
+  truncate,
+} from "common/src/helpers";
 import type {
   ApplicationSectionFormValue,
   ApplicationEventScheduleFormType,
@@ -43,6 +47,9 @@ type DailyOpeningHours =
     }[]
   | null;
 
+// Mobile layout breaks if the select options are too long
+const MAX_SELECT_OPTION_LENGTH = 28;
+
 const StyledNotification = styled(Notification)`
   margin-top: var(--spacing-m);
 `;
@@ -252,10 +259,15 @@ const Page2 = ({ application, onNext }: Props): JSX.Element => {
   const resUnits = filterNonNullable(
     resUnitOptions.map((n) => n?.reservationUnit)
   );
-  const reservationUnitOptions = resUnits.map((n) => ({
-    value: n?.pk ?? 0,
-    label: getTranslationSafe(n, "name", getLocalizationLang(i18n.language)),
-  }));
+  const reservationUnitOptions = resUnits
+    .map((n) => ({
+      value: n?.pk ?? 0,
+      label: getTranslationSafe(n, "name", getLocalizationLang(i18n.language)),
+    }))
+    .map(({ value, label }) => ({
+      value,
+      label: truncate(label, MAX_SELECT_OPTION_LENGTH),
+    }));
   // TODO why is this done like this?
   const openingHours = filterNonNullable(
     resUnits.find((n) => n.pk === reservationUnitPk)?.applicationRoundTimeSlots

apps/ui/components/application/TimePreview.tsx

@@ -20,6 +20,8 @@ const WeekWrapper = styled.div`
 const Label = styled.div`
   ${fontBold};
   padding-right: 4px;
+  max-width: 10ch;
+  width: 100%;
 `;
 
 function Weekdays({

packages/common/src/helpers.ts

@@ -50,3 +50,6 @@ export function base64encode(str: string) {
   }
   return Buffer.from(str, "binary").toString("base64");
 }
+
+export const truncate = (val: string, maxLen: number): string =>
+  val.length > maxLen ? `${val.substring(0, maxLen - 1)}…` : val;