From 7bcabe97453b0eb07ded28413bedfa044328c367 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Fri, 9 Jun 2023 09:00:23 +0200
Subject: [PATCH] fix safari vector page layout bug

---
 apps/www/components/Sections/UseCasesSection.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/components/Sections/UseCasesSection.tsx b/apps/www/components/Sections/UseCasesSection.tsx
index 34498ddf2ce..280bcdcef8d 100644
--- a/apps/www/components/Sections/UseCasesSection.tsx
+++ b/apps/www/components/Sections/UseCasesSection.tsx
@@ -37,7 +37,7 @@ const UseCasesSection = ({ title, paragraph, useCases }: Props) => {
         </div>
         <div
           ref={ref}
-          className="mx-auto w-full max-w-5xl grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"
+          className="relative mx-auto w-full max-w-5xl grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"
         >
           {useCases.map((useCase, i) => {
             return <UseCase useCase={useCase} isInView={isInView} index={i} key={useCase.title} />
@@ -61,7 +61,7 @@ const UseCase = ({
   const animate = getAnimation({ delay: index * 0.1 })
 
   return (
-    <m.div initial={initial} animate={isInView ? animate : initial} className="flex w-full h-full">
+    <m.div initial={initial} animate={isInView ? animate : initial} className="flex">
       <InteractiveShimmerCard
         outerClassName="w-full"
         innerClassName="p-4 md:p-8 h-full !bg-scale-200"