allow table to overflow horizontally (#1881)

Author: aelmanaa

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 {

src/features/ccip/components/billing/TokenCalculator.tsx

@@ -79,6 +79,7 @@ const containerStyle = {
   alignItems: "center",
   gap: "0.5em",
   padding: "1em",
+  overflowX: "auto",
 }
 
 const tableStyle = {