From ea8958f8bc993a50a63db1a0af73cfa4abf4a3a7 Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Sun, 15 Mar 2026 05:43:12 +0300
Subject: [PATCH] feat: hide chain spec cards on mobile, keep mainnet details
 visible

Mobile users only see the Mainnet detail card (WebSocket endpoint,
Chain ID, explorer button, services grid). The individual chain
cards (Staging, Testnet, Beta, etc.) and subdomains box are hidden
on mobile and visible on md+ screens.
---
 web/src/components/ChainSpecs.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ChainSpecs.tsx b/web/src/components/ChainSpecs.tsx
index 23c643ef..a54af00a 100644
--- a/web/src/components/ChainSpecs.tsx
+++ b/web/src/components/ChainSpecs.tsx
@@ -134,7 +134,8 @@ const ChainSpecs: React.FC = () => {
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        {/* Chain cards grid - hidden on mobile, visible on md+ */}
+        <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
           {chainSpecs.map((spec) => (
             <div
               key={spec.id}
@@ -157,9 +158,9 @@ const ChainSpecs: React.FC = () => {
                   {spec.type}
                 </span>
               </div>
-              
+
               <h3 className="text-white font-semibold mb-2">{spec.name}</h3>
-              
+
               <div className="flex items-center text-sm text-gray-400">
                 <Server className="w-3 h-3 mr-1" />
                 <span>{spec.validators} validators</span>