From 787c6ddd4f8745497f4d39e878f1a6e2e013d615 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sat, 26 Jul 2025 00:41:08 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Fix=20Cards=20Page=20Responsive?=
 =?UTF-8?q?=20Layout=20Issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧 Grid Layout Improvements:
- Fixed excessive right padding (pr-96) that was cutting off cards on smaller screens
- Made right padding responsive: only applies on lg+ screens where side panels are visible
- Improved grid columns: grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5
- Added responsive gap spacing: gap-4 sm:gap-6 lg:gap-8
- Made container padding responsive: p-4 sm:p-6 lg:p-8

📱 Mobile-First Responsive Design:
- Added 'xs' breakpoint (475px) to Tailwind config for better mobile control
- Made header layout stack vertically on mobile with proper spacing
- Responsive text sizing throughout (text-2xl sm:text-3xl)
- Improved button spacing and layout for mobile devices

🎯 Layout Fixes:
- Cards no longer get cut off on mobile/tablet screens
- Side panels properly hidden on screens < 1024px via existing CSS
- Grid adapts properly to available screen space
- Better utilization of screen real estate on all devices

✅ Cross-Device Testing:
- Mobile: Single column layout with proper spacing
- Tablet: 2-3 columns with adequate gaps
- Desktop: 3-4 columns with side panel space reserved
- Large screens: 4-5 columns with full side panel functionality

The cards page now provides an optimal viewing experience across all device sizes! 📱💻🖥️
---
 pages/cards.js     | 20 ++++++++++----------
 tailwind.config.js |  6 +++++-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/pages/cards.js b/pages/cards.js
index d485bda..497d40d 100644
--- a/pages/cards.js
+++ b/pages/cards.js
@@ -539,17 +539,17 @@ export default function Cards() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
-        <div className="flex items-center justify-between">
+      <div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
-            <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+            <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
               Cards
             </h1>
-            <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
+            <p className="text-base sm:text-lg" style={{ color: 'var(--text-secondary)' }}>
               Browse and manage your card collection
             </p>
           </div>
-          <div className="flex space-x-4">
+          <div className="flex space-x-2 sm:space-x-4">
             <button 
               onClick={() => setViewMode('grid')}
               className={`p-2 rounded-xl transition-all duration-200 ${
@@ -587,12 +587,12 @@ export default function Cards() {
       </div>
 
       {/* Quick Filters */}
-      <div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+      <div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
         <div className="mb-4">
-          <h3 className="text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
+          <h3 className="text-base sm:text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
             Quick Filters
           </h3>
-          <div className="flex flex-wrap gap-3">
+          <div className="flex flex-wrap gap-2 sm:gap-3">
             <button
               onClick={() => setSelectedTCG('all')}
               className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
@@ -631,7 +631,7 @@ export default function Cards() {
         </div>
 
         {/* Advanced Filters */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           <div>
             <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
               Search
@@ -816,7 +816,7 @@ export default function Cards() {
           </div>
         ) : (
           <>
-            <div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8 p-8 pr-96' : 'space-y-4 p-6'}>
+            <div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 p-4 sm:p-6 lg:p-8 lg:pr-96' : 'space-y-4 p-6'}>
               {cards.map(card => (
                 <CardItem
                   key={card.id}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0bb2067..128c279 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,11 @@ export default {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        'xs': '475px',
+      },
+    },
   },
   plugins: [],
 } 
\ No newline at end of file