feat: responsive stores

sadmann7 · May 5, 2024 · 245aa38 · 245aa38
1 parent 04364fd
commit 245aa38
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/app/(dashboard)/dashboard/stores/page.tsx b/src/app/(dashboard)/dashboard/stores/page.tsx
@@ -39,7 +39,7 @@ export default async function StoresPage() {
           planMetricsPromise={planMetricsPromise}
         />
       </PageHeader>
-      <section className="flex items-center gap-4">
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <React.Suspense
           fallback={Array.from({ length: 3 }).map((_, i) => (
             <StoreCardSkeleton key={i} />

diff --git a/src/components/store-card-skeleton.tsx b/src/components/store-card-skeleton.tsx
@@ -9,7 +9,7 @@ export function StoreCardSkeleton() {
         <Skeleton className="h-4 w-1/2" />
         <Skeleton className="h-4 w-1/4" />
       </CardHeader>
-      <CardContent className="flex items-center gap-4 pt-4">
+      <CardContent className="flex flex-wrap items-center gap-4 pt-4">
         <Skeleton className="h-4 w-1/3" />
         <Skeleton className="h-4 w-1/3" />
         <Skeleton className="h-4 w-1/3" />

diff --git a/src/components/store-card.tsx b/src/components/store-card.tsx
@@ -72,7 +72,7 @@ export function StoreCard({ store, href }: StoreCardProps) {
               : `Explore ${store.name} products`}
           </CardDescription>
         </CardHeader>
-        <CardContent className="flex items-center gap-4 pt-4 text-[0.8rem] text-muted-foreground">
+        <CardContent className="flex flex-wrap items-center gap-4 pt-4 text-[0.8rem] text-muted-foreground">
           <div className="flex items-center">
             <Icons.product className="mr-1.5 size-3.5" aria-hidden="true" />
             {store.productCount} products