From cd78766add9d07dcde672a506013807f2d5fa63b Mon Sep 17 00:00:00 2001
From: Johannes Schmidt <devshred@tigerflanke.de>
Date: Sun, 9 Jun 2024 21:07:46 +0200
Subject: [PATCH] fix(layout): improve responsiveness

---
 src/components/merge/UploadForm.tsx | 3 +--
 src/pages/MergeScreen.tsx           | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/merge/UploadForm.tsx b/src/components/merge/UploadForm.tsx
index 9f89abe..a6dcc56 100644
--- a/src/components/merge/UploadForm.tsx
+++ b/src/components/merge/UploadForm.tsx
@@ -15,7 +15,6 @@ const baseStyle = {
   borderRadius: 16,
   borderStyle: 'dashed',
   transition: 'border .24s ease-in-out',
-  width: '480px',
 }
 
 const focusedStyle = {
@@ -68,7 +67,7 @@ const UploadForm: React.FC = () => {
       {mergedFile === null && (
         <div className="my-7">
           <section className="container">
-            <div {...getRootProps({ style })} className="text-base-content dropzone">
+            <div {...getRootProps({ style })} className="text-base-content dropzone w-80 sm:w-[480px]">
               <input {...getInputProps()} />
               {isDragActive ? (
                 <>
diff --git a/src/pages/MergeScreen.tsx b/src/pages/MergeScreen.tsx
index 1223902..3af9570 100644
--- a/src/pages/MergeScreen.tsx
+++ b/src/pages/MergeScreen.tsx
@@ -15,7 +15,7 @@ const MergeScreen = () => (
       </UploadProvider>
     </div>
     <div
-      className="ml-10 mt-10 invisible 2xl:visible xl:visible relative"
+      className="mx-10 mt-10 invisible 2xl:visible xl:visible relative"
       style={{ width: '100%', maxWidth: '1024px' }}
     >
       <GpsToolsGraphic />