From c60e67aca857fe13eb7c8542b0cd11b349ead345 Mon Sep 17 00:00:00 2001
From: Iqro-dev <igor.sokolowski.code@gmail.com>
Date: Tue, 8 Oct 2024 03:13:59 +0200
Subject: [PATCH] feat(item-list): fix card grid to put elements on start and
 center the grid

---
 app/components/items/cards/item-card.tsx | 2 +-
 app/components/items/list/items-list.tsx | 4 ++--
 app/sections/default-section.tsx         | 2 +-
 tailwind.config.ts                       | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/items/cards/item-card.tsx b/app/components/items/cards/item-card.tsx
index 4fb6f5e5..b251356c 100644
--- a/app/components/items/cards/item-card.tsx
+++ b/app/components/items/cards/item-card.tsx
@@ -44,7 +44,7 @@ function ItemCard({
   album,
 }: ItemCard.Props) {
   return (
-    <Card className="flex flex-col gap-3 rounded-lg bg-neutral-800 p-4">
+    <Card className="flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4">
       <ItemImage images={images ?? album} alt={name} size={200} />
 
       <div
diff --git a/app/components/items/list/items-list.tsx b/app/components/items/list/items-list.tsx
index 3785ce95..58f18c27 100644
--- a/app/components/items/list/items-list.tsx
+++ b/app/components/items/list/items-list.tsx
@@ -61,7 +61,7 @@ function ItemsList({
   if (isTop) sortedItems.splice(0, 2, sortedItems[1], sortedItems[0])
 
   return (
-    <div className={cn('flex flex-col gap-8', className)}>
+    <div className={cn('align-center flex flex-col gap-8', className)}>
       {isTop && (
         <>
           <div className="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24">
@@ -95,7 +95,7 @@ function ItemsList({
       <div
         className={cn(
           isCard
-            ? 'flex w-full flex-wrap justify-center gap-4'
+            ? 'grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4'
             : 'flex flex-col'
         )}
       >
diff --git a/app/sections/default-section.tsx b/app/sections/default-section.tsx
index 3f4b3f6b..8a0342ed 100644
--- a/app/sections/default-section.tsx
+++ b/app/sections/default-section.tsx
@@ -19,7 +19,7 @@ function DefaultSection({
   ...props
 }: DefaultSection.Props) {
   return (
-    <section className="flex flex-col gap-4">
+    <section className="flex flex-col gap-6">
       <header className="flex items-center justify-between">
         <h2 className="text-4xl">{title}</h2>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 24bbf4bf..6a3e5f1b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,6 @@
 import { type Config } from 'tailwindcss'
-import plugin from 'tailwindcss/plugin'
 import TailwindCSSAnimate from 'tailwindcss-animate'
+import plugin from 'tailwindcss/plugin'
 
 export default {
   darkMode: ['class'],