From e6bda688ac3ba1c04e82721add92e755ea5386c3 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Mon, 14 Mar 2022 09:19:22 +0100
Subject: [PATCH] fix(client/basics): fix issue with overlapping photo filters
 on safari/webkit/iOS

---
 client/components/build/LeftSidebar/sections/Basics.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/components/build/LeftSidebar/sections/Basics.tsx b/client/components/build/LeftSidebar/sections/Basics.tsx
index b9427cea..6f3d2c5b 100644
--- a/client/components/build/LeftSidebar/sections/Basics.tsx
+++ b/client/components/build/LeftSidebar/sections/Basics.tsx
@@ -27,10 +27,12 @@ const Basics = () => {
       <Heading path="sections.basics" name={t('builder.leftSidebar.sections.basics.heading')} />
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div className="flex flex-col items-center gap-4 sm:col-span-2 sm:flex-row">
-          <PhotoUpload />
+        <div className="grid items-center gap-4 sm:col-span-2 sm:grid-cols-3">
+          <div className="mx-auto">
+            <PhotoUpload />
+          </div>
 
-          <div className="flex w-full flex-col-reverse gap-4 sm:flex-col sm:gap-2">
+          <div className="grid gap-2 w-full sm:col-span-2">
             <ResumeInput label={t('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
 
             <Button variant="outlined" startIcon={<PhotoFilter />} onClick={handleClick}>