From 137d2cf4991802576c0bd64e2eab9dde1a022f5d Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 30 Jan 2025 16:36:29 +0100
Subject: [PATCH] fix(LOY-104): reduce text in tables to not break mobile
 design

adjusted padding to show points required on one row
---
 components/Blocks/DynamicContent/OverviewTable/Client.tsx   | 6 +++---
 .../OverviewTable/LevelSummary/levelSummary.module.css      | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/Blocks/DynamicContent/OverviewTable/Client.tsx b/components/Blocks/DynamicContent/OverviewTable/Client.tsx
index ce1d9b8bd..e3c960f39 100644
--- a/components/Blocks/DynamicContent/OverviewTable/Client.tsx
+++ b/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({
diff --git a/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css b/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
index 93ed147e1..5e595dfb7 100644
--- a/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
+++ b/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 {