Mobile-first Table Redesign

nikdelvin · nikdelvin · commit be576aff8835 · 2025-11-24T21:07:39.000+04:00
diff --git a/src/components/MetricsTable.tsx b/src/components/MetricsTable.tsx
@@ -62,10 +62,10 @@ export default function MetricsTable() {
   }, []);
 
   return (
-    <div ref={tableRef} className="overflow-x-auto">
-      <div className="min-w-[650px] bg-gray-900/50 backdrop-blur-xl rounded-2xl border border-gray-800 overflow-hidden">
-        {/* Table Header */}
-        <div className="grid grid-cols-4 gap-4 p-6 bg-linear-to-r from-gray-900 to-gray-800 border-b border-gray-700">
+    <div ref={tableRef} className="w-full">
+      <div className="flex flex-col gap-4 md:gap-0 md:bg-gray-900/50 md:backdrop-blur-xl md:rounded-2xl md:border md:border-gray-800 md:overflow-hidden">
+        {/* Table Header - Desktop Only */}
+        <div className="hidden md:grid grid-cols-4 gap-4 p-6 bg-linear-to-r from-gray-900 to-gray-800 border-b border-gray-700">
           <div className="font-semibold text-gray-300">Metric</div>
           <div className="font-semibold text-gray-300">Without context</div>
           <div className="font-semibold text-gray-300">With context</div>
@@ -76,23 +76,37 @@ export default function MetricsTable() {
         {metrics.map((metric, index) => (
           <motion.div
             key={metric.name}
-            className="grid grid-cols-4 gap-4 p-6 border-b border-gray-800 last:border-b-0 hover:bg-gray-800/50 transition-colors"
-            initial={{ opacity: 0, x: -20 }}
-            animate={isVisible ? { opacity: 1, x: 0 } : {}}
+            className="flex flex-col p-6 bg-gray-900/40 backdrop-blur-sm rounded-2xl border border-gray-800 md:bg-transparent md:rounded-none md:border-0 md:border-b md:border-gray-800 md:last:border-b-0 md:grid md:grid-cols-4 md:gap-4 md:items-center hover:bg-gray-800/50 transition-colors"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isVisible ? { opacity: 1, y: 0 } : {}}
             transition={{ delay: index * 0.1, duration: 0.5 }}
           >
-            <div className="font-medium text-white">{metric.name}</div>
-            <div className="text-gray-400">{metric.without}</div>
-            <div className="text-white font-semibold">{metric.with}</div>
-            <div>
-              <motion.span
-                className={`inline-block px-3 py-1 rounded-full text-sm font-bold bg-linear-to-r ${metric.color} text-white`}
-                initial={{ scale: 0 }}
-                animate={isVisible ? { scale: 1 } : {}}
-                transition={{ delay: index * 0.1 + 0.3, type: 'spring', stiffness: 200 }}
-              >
-                {metric.improvement}
-              </motion.span>
+            <div className="mb-4 md:mb-0">
+              <div className="text-lg font-bold text-white md:text-base md:font-medium">{metric.name}</div>
+            </div>
+            
+            <div className="grid grid-cols-2 gap-4 md:contents">
+              <div className="md:block">
+                <div className="text-xs text-gray-500 uppercase tracking-wider mb-1 md:hidden">Without context</div>
+                <div className="text-gray-400">{metric.without}</div>
+              </div>
+              
+              <div className="md:block">
+                <div className="text-xs text-gray-500 uppercase tracking-wider mb-1 md:hidden">With context</div>
+                <div className="text-white font-semibold">{metric.with}</div>
+              </div>
+              
+              <div className="col-span-2 md:col-span-1 md:block mt-2 md:mt-0">
+                <div className="text-xs text-gray-500 uppercase tracking-wider mb-2 md:hidden">Improvement</div>
+                <motion.span
+                  className={`inline-block px-3 py-1 rounded-full text-sm font-bold bg-linear-to-r ${metric.color} text-white`}
+                  initial={{ scale: 0 }}
+                  animate={isVisible ? { scale: 1 } : {}}
+                  transition={{ delay: index * 0.1 + 0.3, type: 'spring', stiffness: 200 }}
+                >
+                  {metric.improvement}
+                </motion.span>
+              </div>
             </div>
           </motion.div>
         ))}
