From 0b7cb7ad90a5428a49a7fa198525898e6d65b9ee Mon Sep 17 00:00:00 2001
From: aelmanaa <aelmanaa@gmail.com>
Date: Mon, 15 Apr 2024 18:57:00 +0200
Subject: [PATCH] allow table to overflow horizontally

---
 .../ccip/components/billing/Billing.astro     | 118 +++++++++---------
 .../components/billing/TokenCalculator.tsx    |   1 +
 2 files changed, 61 insertions(+), 58 deletions(-)

diff --git a/src/features/ccip/components/billing/Billing.astro b/src/features/ccip/components/billing/Billing.astro
index 230a36f1290..78e377d44bc 100644
--- a/src/features/ccip/components/billing/Billing.astro
+++ b/src/features/ccip/components/billing/Billing.astro
@@ -13,64 +13,66 @@ const messagingFeesFromToEthereum = calculateMessagingNetworkFeesDirect("fromToE
 const messagingFeesNonEthereum = calculateMessagingNetworkFeesDirect("nonEthereum")
 ---
 
-<table>
-  <thead>
-    <tr>
-      <th rowspan="2">Use case</th>
-      <th rowspan="2">Token Pool Mechanism</th>
-      <th rowspan="2">Lanes</th>
-      <th colspan="2">Fee Token</th>
-    </tr>
-    <tr>
-      <th>(Wrapped) Gas Token</th>
-      <th>LINK</th>
-    </tr>
-  </thead>
-  <tbody>
-    <!-- Token Transfers with/without messaging -->
-    <tr>
-      <td rowspan="4">
-        <ul style="list-style-type:none; margin:0; padding:0;">
-          <li>Token Transfers</li>
-          <li>Programmable Token Transfers</li>
-        </ul>
-      </td>
-      <td>Lock and Unlock</td>
-      <td>All Lanes</td>
-      <td>{lockAndUnlockAllLanes.gasTokenFee}</td>
-      <td>{lockAndUnlockAllLanes.linkFee}</td>
-    </tr>
-    <tr>
-      <td rowspan="3">Lock and Mint<br />Burn and Mint<br />Burn and Unlock</td>
-      <td>Non-Ethereum</td>
-      <td>{restMechanismNonEthereum.gasTokenFee}</td>
-      <td>{restMechanismNonEthereum.linkFee}</td>
-    </tr>
-    <tr>
-      <td>From: Ethereum</td>
-      <td>{restFromEthereum.gasTokenFee}</td>
-      <td>{restFromEthereum.linkFee}</td>
-    </tr>
-    <tr>
-      <td>To: Ethereum</td>
-      <td>{restToEthereum.gasTokenFee}</td>
-      <td>{restToEthereum.linkFee}</td>
-    </tr>
-    <!-- Messaging -->
-    <tr>
-      <td rowspan="2">Messaging</td>
-      <td rowspan="2">N/A</td>
-      <td>Non-Ethereum</td>
-      <td>{messagingFeesNonEthereum.gasTokenFee}</td>
-      <td>{messagingFeesNonEthereum.linkFee}</td>
-    </tr>
-    <tr>
-      <td>From/To: Ethereum</td>
-      <td>{messagingFeesFromToEthereum.gasTokenFee}</td>
-      <td>{messagingFeesFromToEthereum.linkFee}</td>
-    </tr>
-  </tbody>
-</table>
+<div style="overflow-x: auto;">
+  <table>
+    <thead>
+      <tr>
+        <th rowspan="2">Use case</th>
+        <th rowspan="2">Token Pool Mechanism</th>
+        <th rowspan="2">Lanes</th>
+        <th colspan="2">Fee Token</th>
+      </tr>
+      <tr>
+        <th>(Wrapped) Gas Token</th>
+        <th>LINK</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Token Transfers with/without messaging -->
+      <tr>
+        <td rowspan="4">
+          <ul style="list-style-type:none; margin:0; padding:0;">
+            <li>Token Transfers</li>
+            <li>Programmable Token Transfers</li>
+          </ul>
+        </td>
+        <td>Lock and Unlock</td>
+        <td>All Lanes</td>
+        <td>{lockAndUnlockAllLanes.gasTokenFee}</td>
+        <td>{lockAndUnlockAllLanes.linkFee}</td>
+      </tr>
+      <tr>
+        <td rowspan="3">Lock and Mint<br />Burn and Mint<br />Burn and Unlock</td>
+        <td>Non-Ethereum</td>
+        <td>{restMechanismNonEthereum.gasTokenFee}</td>
+        <td>{restMechanismNonEthereum.linkFee}</td>
+      </tr>
+      <tr>
+        <td>From: Ethereum</td>
+        <td>{restFromEthereum.gasTokenFee}</td>
+        <td>{restFromEthereum.linkFee}</td>
+      </tr>
+      <tr>
+        <td>To: Ethereum</td>
+        <td>{restToEthereum.gasTokenFee}</td>
+        <td>{restToEthereum.linkFee}</td>
+      </tr>
+      <!-- Messaging -->
+      <tr>
+        <td rowspan="2">Messaging</td>
+        <td rowspan="2">N/A</td>
+        <td>Non-Ethereum</td>
+        <td>{messagingFeesNonEthereum.gasTokenFee}</td>
+        <td>{messagingFeesNonEthereum.linkFee}</td>
+      </tr>
+      <tr>
+        <td>From/To: Ethereum</td>
+        <td>{messagingFeesFromToEthereum.gasTokenFee}</td>
+        <td>{messagingFeesFromToEthereum.linkFee}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 <style>
   table {
diff --git a/src/features/ccip/components/billing/TokenCalculator.tsx b/src/features/ccip/components/billing/TokenCalculator.tsx
index 81bf3ecf52f..3d0b8e707fd 100644
--- a/src/features/ccip/components/billing/TokenCalculator.tsx
+++ b/src/features/ccip/components/billing/TokenCalculator.tsx
@@ -79,6 +79,7 @@ const containerStyle = {
   alignItems: "center",
   gap: "0.5em",
   padding: "1em",
+  overflowX: "auto",
 }
 
 const tableStyle = {