fix: adjust table scaling

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;

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>

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 {
+.placeholder {
-  display: flex;
+  width: 100%;
-  flex-direction: column;
+  padding: 24px;
-  align-items: center;
+  text-align: center;
-  padding: 20px;
-  font-size: var(--typography-Title5-Desktop-fontSize);
   border: 1px solid var(--Base-Fill-Normal);
-  border-top: none;
 }

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>
   )
 }