From 4edc2bb580d1620a783c4182d3dac506684afb87 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Wed, 12 Jun 2024 18:22:27 +0700
Subject: [PATCH] fix: homepage filters layout

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 components/filters/hompage-filters.tsx | 2 +-
 components/hero.tsx                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/filters/hompage-filters.tsx b/components/filters/hompage-filters.tsx
index 726f8479d..3c6e7a38d 100644
--- a/components/filters/hompage-filters.tsx
+++ b/components/filters/hompage-filters.tsx
@@ -13,7 +13,7 @@ const HomePageFilters = async () => {
       <h1 className="text-4xl font-bold tracking-tight text-white lg:text-6xl">
         Find Your Car Part
       </h1>
-      <div className="mt-5">
+      <div className="mt-5 flex grow flex-col items-center gap-3 @md:flex-row">
         <FiltersList
           years={years}
           makes={makes}
diff --git a/components/hero.tsx b/components/hero.tsx
index bc62907e5..a5099371c 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -75,7 +75,7 @@ const Hero = async () => {
                 We will match or beat any competitor&apos;s pricing.
               </p>
             </div>
-            <div className="relative mx-auto flex max-w-4xl flex-col items-center ">
+            <div className="relative mx-auto flex w-3/4 max-w-4xl flex-col items-center @container">
               <Suspense fallback={<HomePageFiltersPlaceholder />}>
                 <HomePageFilters />
               </Suspense>