maddox/store-matching-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile always uses card view, table only on desktop

Browse source 
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>
This commit is contained in:
Maddox 2026-04-07 18:26:08 -04:00
parent 7152d6b492
commit 1f760e0c65
1 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/App.tsx
View file

@ -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 && (