fix(layout): improve responsiveness

devshred · Jun 9, 2024 · cd78766 · cd78766
1 parent d6659ff
commit cd78766
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 3 deletions.
diff --git 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
@@ -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 />