Mobile always uses card view, table only on desktop

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

@@ -179,22 +179,26 @@ export default function App() {
           <div className="glass rounded-2xl px-6 py-16 text-center text-slate-600 text-sm">
             Loading…
           </div>
-        ) : view === 'grid' ? (
+        ) : stores.length === 0 ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+          <div className="glass rounded-2xl px-6 py-16 text-center text-slate-600 text-sm">
-            {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
+            {/* Mobile: always cards */}
-                  key={s.id}
+            <div className="sm:hidden grid grid-cols-1 gap-3">
-                  store={s}
+              {stores.map(s => (
-                  onEdit={setEditStore}
+                <StoreCard key={s.id} store={s} onEdit={setEditStore} onDelete={setDeleteTarget} />
-                  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
@@ -205,6 +209,9 @@ export default function App() {
                   onDelete={setDeleteTarget}
                 />
               )}
+            </div>
+          </>
+        )}
 
         {pagination && (
           <Pagination