From 73c52393f7b1f953483471ba6db8643447980f62 Mon Sep 17 00:00:00 2001
From: Ammarin <bnsdev@mail.com>
Date: Sun, 9 Jun 2024 22:33:58 +0700
Subject: [PATCH] make fit for mobile

---
 app/layout.tsx              | 2 +-
 app/main-form.tsx           | 4 ++--
 components/UploadedList.tsx | 5 ++++-
 3 files changed, 7 insertions(+), 4 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index 741baa7..5dec434 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={cn(font.className, "bg-primary")}>
         <Toaster richColors={true} position="top-center" />
-        <div className="min-h-screen">{children}</div>
+        <div className="min-h-screen px-3 py-20 xl:py-0">{children}</div>
         <Footer />
       </body>
     </html>
diff --git a/app/main-form.tsx b/app/main-form.tsx
index dba666e..2cbf1e7 100644
--- a/app/main-form.tsx
+++ b/app/main-form.tsx
@@ -113,7 +113,7 @@ export default function MainForm() {
     setSubmit(false);
   };
   return (
-    <div className="translate-y-32 xl:px-0 px-2 grid xl:justify-center gap-1">
+    <div className="xl:translate-y-32 grid xl:justify-center gap-1">
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} onReset={onReset}>
           <Card className="xl:w-96">
@@ -162,7 +162,7 @@ export default function MainForm() {
           </Card>
         </form>
       </Form>
-      <UploadedList files={files} removeFile={removeFile} />
+      <UploadedList files={files} removeFile={removeFile} isSubmit={isSubmit} />
     </div>
   );
 }
diff --git a/components/UploadedList.tsx b/components/UploadedList.tsx
index ef6bea5..eceb3a9 100644
--- a/components/UploadedList.tsx
+++ b/components/UploadedList.tsx
@@ -15,9 +15,10 @@ import { downloadAll } from "@/lib/download";
 interface Props {
   files: FileState[];
   removeFile: (blobURL: string) => void;
+  isSubmit: boolean;
 }
 
-export default function UploadedList({ files, removeFile }: Props) {
+export default function UploadedList({ files, removeFile, isSubmit }: Props) {
   return (
     <>
       <ScrollArea
@@ -75,6 +76,7 @@ export default function UploadedList({ files, removeFile }: Props) {
                   size={"icon"}
                   variant={"outline"}
                   onClick={() => removeFile(obj.blobURL)}
+                  disabled={isSubmit}
                 >
                   <Cross2Icon />
                 </Button>
@@ -88,6 +90,7 @@ export default function UploadedList({ files, removeFile }: Props) {
         <Button
           type="button"
           variant={"outline"}
+          className="w-full"
           onClick={() => downloadAll(files)}
         >
           ดาวน์โหลดทั้งหมด
