fix: token grid in chain page design

Author: markshenouda

src/components/CCIP/Cards/TokenCard.css

@@ -51,3 +51,57 @@
     height: 124px;
   }
 }
+
+/* Square variant styles */
+.token-card__square-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--space-1x);
+  text-align: center;
+}
+
+.token-card__square-container:hover {
+  background-color: var(--gray-50);
+}
+
+.token-card__square-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--space-4x);
+}
+
+.token-card__square-logo object,
+.token-card__square-logo object img {
+  width: var(--space-16x);
+  height: var(--space-16x);
+  border-radius: 50%;
+}
+
+.token-card__square-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.token-card__square-content h3 {
+  font-size: var(--space-4x);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--space-6x);
+  color: var(--gray-950);
+  margin-bottom: var(--space-1x);
+  text-align: center;
+}
+
+.token-card__square-content p {
+  margin-bottom: 0;
+  font-size: var(--space-3x);
+  line-height: var(--space-5x);
+  color: var(--gray-500);
+  text-align: center;
+}

src/components/CCIP/Cards/TokenCard.tsx

@@ -9,9 +9,10 @@ interface TokenCardProps {
   link?: string
   onClick?: () => void
   totalNetworks?: number
+  variant?: "default" | "square"
 }
 
-const TokenCard = memo(function TokenCard({ id, logo, link, onClick, totalNetworks }: TokenCardProps) {
+const TokenCard = memo(function TokenCard({ id, logo, link, onClick, totalNetworks, variant = "default" }: TokenCardProps) {
   const logoElement = (
     <object data={logo} type="image/png" aria-label={`${id} token logo`}>
       <img src={fallbackTokenIconUrl} alt={`${id} token logo`} loading="lazy" />
@@ -21,6 +22,36 @@ const TokenCard = memo(function TokenCard({ id, logo, link, onClick, totalNetwor
   const subtitle =
     totalNetworks !== undefined ? `${totalNetworks} ${totalNetworks === 1 ? "network" : "networks"}` : undefined
 
+  if (variant === "square") {
+    const content = (
+      <>
+        <div className="token-card__square-logo">{logoElement}</div>
+        <div className="token-card__square-content">
+          <h3>{id}</h3>
+          {subtitle && <p>{subtitle}</p>}
+        </div>
+      </>
+    )
+
+    if (link) {
+      return (
+        <a href={link} aria-label={`View ${id} token details`}>
+          <div className="token-card__square-container">{content}</div>
+        </a>
+      )
+    }
+
+    if (onClick) {
+      return (
+        <button type="button" className="token-card__square-container" onClick={onClick} aria-label={`View ${id} token details`}>
+          {content}
+        </button>
+      )
+    }
+
+    return <div className="token-card__square-container">{content}</div>
+  }
+
   return (
     <Card
       logo={logoElement}

src/components/CCIP/Chain/Chain.astro

@@ -187,8 +187,12 @@ const chainStructuredData = generateChainStructuredData(
       display: grid;
       --doc-padding: var(--space-10x);
       padding: var(--doc-padding) var(--space-8x);
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-24x);
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--space-8x);
+    }
+
+    .layout > div {
+      min-width: 0;
     }
 
     .networks__grid {

src/components/CCIP/Chain/ChainTokenGrid.tsx

@@ -36,6 +36,7 @@ function ChainTokenGrid({ tokens, network, environment }: ChainTokenGridProps) {
               id={token.id}
               logo={token.logo}
               key={token.id}
+              variant="square"
               onClick={() => {
                 const selectedNetwork = Object.keys(data)
                   .map((key) => {