From 1f760e0c65fe01c02ca57d7501aabd7da135c4c5 Mon Sep 17 00:00:00 2001
From: Maddox <maddox@3ddbrewery.com>
Date: Tue, 7 Apr 2026 18:26:08 -0400
Subject: [PATCH] Mobile always uses card view, table only on desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On mobile (< sm breakpoint) cards are always rendered regardless of the
view toggle. The toggle is already hidden on mobile — this makes the
rendering match.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx | 51 +++++++++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 90fbd0a..d6084a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -179,31 +179,38 @@ export default function App() {
           <div className="glass rounded-2xl px-6 py-16 text-center text-slate-600 text-sm">
             Loading…
           </div>
-        ) : view === 'grid' ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-            {stores.length === 0 ? (
-              <div className="col-span-full glass rounded-2xl px-6 py-16 text-center text-slate-600 text-sm">
-                No stores found. Try adjusting your filters.
-              </div>
-            ) : (
-              stores.map(s => (
-                <StoreCard
-                  key={s.id}
-                  store={s}
+        ) : stores.length === 0 ? (
+          <div className="glass rounded-2xl px-6 py-16 text-center text-slate-600 text-sm">
+            No stores found. Try adjusting your filters.
+          </div>
+        ) : (
+          <>
+            {/* Mobile: always cards */}
+            <div className="sm:hidden grid grid-cols-1 gap-3">
+              {stores.map(s => (
+                <StoreCard key={s.id} store={s} onEdit={setEditStore} onDelete={setDeleteTarget} />
+              ))}
+            </div>
+
+            {/* Desktop: toggle between table and grid */}
+            <div className="hidden sm:block">
+              {view === 'grid' ? (
+                <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                  {stores.map(s => (
+                    <StoreCard key={s.id} store={s} onEdit={setEditStore} onDelete={setDeleteTarget} />
+                  ))}
+                </div>
+              ) : (
+                <StoreTable
+                  stores={stores}
+                  filters={filters}
+                  onSort={handleSort}
                   onEdit={setEditStore}
                   onDelete={setDeleteTarget}
                 />
-              ))
-            )}
-          </div>
-        ) : (
-          <StoreTable
-            stores={stores}
-            filters={filters}
-            onSort={handleSort}
-            onEdit={setEditStore}
-            onDelete={setDeleteTarget}
-          />
+              )}
+            </div>
+          </>
         )}
 
         {pagination && (