Merged in fix/LOY-104-compare-all-levels-page-bugs (pull request #1234)

fix(LOY-104): reduce text in tables to not break mobile design

Approved-by: Erik Tiekstra

components/Blocks/DynamicContent/OverviewTable/Client.tsx

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
 
 import {
   type MembershipLevel,
-  MembershipLevelEnum,
+  membershipLevels,
 } from "@/constants/membershipLevels"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
@@ -30,8 +30,8 @@ import {
 } from "@/types/components/overviewTable"
 
 function getLevelNamesForSelect(level: MembershipLevel, levelName: string) {
-  const levelToNumber = MembershipLevelEnum[level]
-  return [levelToNumber, levelName].join(" - ")
+  const levelToNumber = membershipLevels[level]
+  return [levelToNumber, levelName].join(" ")
 }
 
 export default function OverviewTableClient({

components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css

@@ -10,7 +10,9 @@
   border-radius: var(--Corner-radius-Medium);
   background-color: var(--Scandic-Brand-Pale-Peach);
   color: var(--Scandic-Peach-80);
-  padding: var(--Spacing-x-half) var(--Spacing-x5);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  text-align: center;
+  width: 100%;
 }
 
 .levelSummaryText {