From 90bd302715f6078a9bdc471cec706ecdc2f3c2f2 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Tue, 21 May 2024 12:09:16 +0200
Subject: [PATCH] fix: adjust table scaling

---
 .../currentPointsBalance.module.css                 |  2 +-
 .../Blocks/Points/CurrentPointsBalance/index.tsx    |  2 +-
 .../Points/EarnAndBurn/earnAndBurn.module.css       | 13 +++++--------
 .../MyPages/Blocks/Points/EarnAndBurn/index.tsx     | 12 ++++++++----
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
index bf503d8dc..a471dc374 100644
--- a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
+++ b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
@@ -1,7 +1,7 @@
 .card {
   background-color: var(--Base-Fill-Normal);
   border-radius: 16px;
-  color: var(Theme/Primary/Light/On Surface/Text);
+  color: var(--Theme-Primary-Light-On-Surface-Text);
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx b/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx
index f0ef8709c..ef406ce76 100644
--- a/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx
+++ b/components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx
@@ -10,7 +10,7 @@ async function CurrentPointsBalance() {
       <h2>{`${_("Total points")}*`}</h2>
       <p
         className={styles.points}
-      >{`${_("Points")}: ${user.membership.currentPoints}`}</p>
+      >{`${_("Points")}: ${user.membership?.currentPoints || "N/A"}`}</p>
       <p className={styles.disclaimer}>
         {`*${_("Points may take up to 10 days to be displayed.")}`}
       </p>
diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css b/components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css
index ad19d150f..5af9de08f 100644
--- a/components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css
@@ -1,8 +1,8 @@
 .container {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 16px;
+  overflow-x: auto;
 }
 
 .table {
@@ -31,12 +31,9 @@
   padding: 16px 32px;
 }
 
-.emptyPlaceholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  font-size: var(--typography-Title5-Desktop-fontSize);
+.placeholder {
+  width: 100%;
+  padding: 24px;
+  text-align: center;
   border: 1px solid var(--Base-Fill-Normal);
-  border-top: none;
 }
diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
index 0a54fb0cd..3510b2787 100644
--- a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
@@ -72,7 +72,7 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
       </Button> */}
     </div>
   ) : (
-    <div>
+    <div className={styles.container}>
       <table className={styles.table}>
         <thead className={styles.thead}>
           <tr>
@@ -83,10 +83,14 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
             ))}
           </tr>
         </thead>
+        <tbody>
+          <tr>
+            <td colSpan={tableHeadings.length} className={styles.placeholder}>
+              {_("No transactions available")}
+            </td>
+          </tr>
+        </tbody>
       </table>
-      <div className={styles.emptyPlaceholder}>
-        {_("No transactions available")}
-      </div>
     </div>
   )
 }