From b170b28fcd3270d15e4bc8fa6a25bad930d48dc6 Mon Sep 17 00:00:00 2001
From: bharathbabu-moralis <bharath.babu@moralis.io>
Date: Wed, 8 Jan 2025 18:25:03 +0400
Subject: [PATCH] fix: table responsiveness and ordering

---
 .../01-web3-data-api/evm/supported-chains.mdx |  86 +++++++++++---
 docs/configs/api-reference/evmChainData.ts    |  86 +++++++-------
 src/css/custom.css                            | 109 ++++++++++++++----
 3 files changed, 200 insertions(+), 81 deletions(-)

diff --git a/docs/01-web3-data-api/evm/supported-chains.mdx b/docs/01-web3-data-api/evm/supported-chains.mdx
index 03f80e3f..d12f8e2f 100644
--- a/docs/01-web3-data-api/evm/supported-chains.mdx
+++ b/docs/01-web3-data-api/evm/supported-chains.mdx
@@ -16,19 +16,79 @@ This table displays the Web3Data APIs supported by each protocol.
   <table>
     <thead>
       <tr>
-        <th>Protocol</th>
-        <th>Wallet API</th>
-        <th>NFT API</th>
-        <th>Token API</th>
-        <th>DeFi API</th>
-        <th>Entity API</th>
-        <th>Blockchain API</th>
-        <th>Profitability API</th>
-        <th>Token Prices</th>
-        <th>NFT Trades</th>
-        <th>NFT Trade Prices</th>
-        <th>NFT Floor Prices</th>
-        <th>Internal Transactions</th>
+        <th className="protocol-column">Protocol</th>
+        <th>
+          <div className="stacked-header">
+            <span>Wallet</span>
+            <span>API</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>NFT</span>
+            <span>API</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>Token</span>
+            <span>API</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>DeFi</span>
+            <span>API</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>Entity</span>
+            <span>API</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>Blockchain</span>
+            <span>API</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>Profitability</span>
+            <span>API</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>Token</span>
+            <span>Prices</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>NFT</span>
+            <span>Trades</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>NFT Trade</span>
+            <span>Prices</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>NFT Floor</span>
+            <span>Prices</span>
+          </div>
+        </th>
+        <th>
+          <div className="stacked-header">
+            <span>Internal</span>
+            <span>Transactions</span>
+          </div>
+        </th>
       </tr>
     </thead>
     <tbody>
diff --git a/docs/configs/api-reference/evmChainData.ts b/docs/configs/api-reference/evmChainData.ts
index 9ff90685..f5dc0bc4 100644
--- a/docs/configs/api-reference/evmChainData.ts
+++ b/docs/configs/api-reference/evmChainData.ts
@@ -498,7 +498,7 @@ const chainData = [
     logo: "/img/content/linea.png",
     chainID: "0xe708 (59144)",
     evmChain: "EvmChain.LINEA",
-    isNew: true,
+    isNew: false,
     type: "Mainnet",
     evmApi: {
       supported: true,
@@ -538,7 +538,7 @@ const chainData = [
     type: "Testnet",
     chainID: "0xe705 (59141)",
     evmChain: "EvmChain.LINEA_SEPOLIA",
-    isNew: true,
+    isNew: false,
     evmApi: {
       supported: true,
       walletApi: true,
@@ -871,47 +871,6 @@ const chainData = [
       supported: true,
     },
   },
-  {
-    name: "Pulsechain",
-    logo: "/img/content/pulsechain.png",
-    type: "Mainnet",
-    chainID: "0x171 (369)",
-    evmChain: "EvmChain.PULSECHAIN",
-    isNew: false,
-    evmApi: {
-      supported: true,
-      walletApi: true,
-      nftApi: false,
-      tokenApi: true,
-      defiApi: false,
-      entityApi: true,
-      blockchainApi: true,
-      pnlApi: false,
-      tokenPrices: true,
-      internalTxs: true,
-      nftTrades: false,
-      nftPrices: false,
-      nftFloorPrices: false,
-      queryParams: ["pulse", "0x171"],
-    },
-    streamsApi: {
-      supported: true,
-      blockConfirmations: "100",
-      internalTxs: false,
-      reason: "Unsupported",
-    },
-    rpcNodes: {
-      supported: true,
-      urls: [
-        "https://site1.moralis-nodes.com/pulse/",
-        "https://site2.moralis-nodes.com/pulse/",
-      ],
-    },
-    authApi: {
-      supported: false,
-      reason: "Unsupported",
-    },
-  },
   {
     name: "Moonbeam",
     logo: "/img/content/moonbeam.png",
@@ -1618,6 +1577,47 @@ const chainData = [
       supported: false,
     },
   },
+  {
+    name: "Pulsechain",
+    logo: "/img/content/pulsechain.png",
+    type: "Mainnet",
+    chainID: "0x171 (369)",
+    evmChain: "EvmChain.PULSECHAIN",
+    isNew: true,
+    evmApi: {
+      supported: true,
+      walletApi: true,
+      nftApi: false,
+      tokenApi: true,
+      defiApi: false,
+      entityApi: true,
+      blockchainApi: true,
+      pnlApi: false,
+      tokenPrices: true,
+      internalTxs: true,
+      nftTrades: false,
+      nftPrices: false,
+      nftFloorPrices: false,
+      queryParams: ["pulse", "0x171"],
+    },
+    streamsApi: {
+      supported: true,
+      blockConfirmations: "100",
+      internalTxs: false,
+      reason: "Unsupported",
+    },
+    rpcNodes: {
+      supported: true,
+      urls: [
+        "https://site1.moralis-nodes.com/pulse/",
+        "https://site2.moralis-nodes.com/pulse/",
+      ],
+    },
+    authApi: {
+      supported: false,
+      reason: "Unsupported",
+    },
+  },
 ] as const;
 
 export default chainData;
diff --git a/src/css/custom.css b/src/css/custom.css
index 333c034d..3c690729 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1548,45 +1548,104 @@ li.dropdown-divider {
   margin-top: -10px;
 }
 
-/* Custom class for Supported Web3Data APIs table */
+/* Web3Data APIs table styles */
 .supported-web3data-apis-table {
   width: 100%;
+  overflow-x: auto;
+  margin: 20px 0;
+}
+
+.supported-web3data-apis-table table {
+  min-width: 100%;
+  width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
-  margin-top: 20px;
   border: 1px solid var(--ifm-table-border-color);
+}
+
+.supported-web3data-apis-table th,
+.supported-web3data-apis-table td {
+  padding: 8px 6px;
+  text-align: left;
+  border: 1px solid var(--ifm-table-border-color);
+  vertical-align: middle;
+  font-size: 13px;
+}
+
+.supported-web3data-apis-table th {
+  background-color: var(--ifm-table-header-background-color);
+  color: var(--ifm-table-header-color);
+  font-weight: var(--ifm-font-weight-semibold);
+}
+
+.supported-web3data-apis-table td {
+  background-color: var(--ifm-background-color);
+  color: var(--ifm-color);
+  width: 7%;
+}
+
+.supported-web3data-apis-table .protocol-column {
+  width: 15%;
+}
+
+.supported-web3data-apis-table tr:nth-child(even) td {
+  background-color: var(--ifm-table-stripe-background);
+}
 
-  th,
-  td {
-    padding: 12px 10px;
-    text-align: left;
-    border: 1px solid var(--ifm-table-border-color);
-    vertical-align: middle;
+/* Stacked header styling */
+.stacked-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  line-height: 1.2;
+  gap: 2px;
+}
+
+.stacked-header span {
+  display: block;
+  font-size: 13px;
+}
+
+/* Icon container */
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* For mobile devices */
+@media (max-width: 1200px) {
+  .supported-web3data-apis-table table {
+    table-layout: auto;
+    width: max-content;
   }
 
-  th {
-    background-color: var(--ifm-table-header-background-color);
-    color: var(--ifm-table-header-color);
-    text-align: left;
+  .supported-web3data-apis-table td {
+    min-width: 60px;
+    width: auto;
   }
 
-  td {
-    background-color: var(--ifm-background-color);
-    color: var(--ifm-color);
+  .supported-web3data-apis-table .protocol-column {
+    min-width: 180px;
+    width: auto;
   }
+}
 
-  tr:nth-child(even) td {
-    background-color: var(--ifm-table-background-color);
+@media (max-width: 768px) {
+  .supported-web3data-apis-table {
+    margin: 0 -16px;
+    border-left: 0;
+    border-right: 0;
   }
 
-  img {
-    width: 20px;
-    height: 20px;
-    margin-right: 8px;
+  .supported-web3data-apis-table th,
+  .supported-web3data-apis-table td {
+    padding: 6px 4px;
+    font-size: 12px;
   }
 
-  .icon-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .stacked-header span {
+    font-size: 12px;
   }
 }