bug: fix nested scroll

a0v0 · Apr 26, 2024 · 2c54a10 · 2c54a10
2 parents 187a5d6 + 2a8a00b
commit 2c54a10
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 15 deletions.
diff --git a/app/tools/image-to-pdf/page.tsx b/app/tools/image-to-pdf/page.tsx
@@ -84,7 +84,7 @@ export default function page() {
         <FileUploader primaryColor="#18c964" acceptedFileTypes={allowedFileTypes} />
         <Spacer y={6} />
         {files.length > 0 ? (
-          <div className="grid grid-cols-2 gap-2">
+          <div className="lg:md:w-[780px]  grid grid-cols-2 gap-2 ">
             <Button color="danger" variant="bordered" onPress={reset}>
               Reset
             </Button>

diff --git a/app/tools/layout.tsx b/app/tools/layout.tsx
@@ -1,9 +1,3 @@
 export default function ToolLayout({children}: {children: React.ReactNode}) {
-  return (
-    <main className="container mx-auto max-w-8xl px-6 flex-grow">
-      <section className="flex-grow overflow-y-auto h-screen flex flex-col items-center pt-0">
-        {children}
-      </section>
-    </main>
-  );
+  return <main className="h-screen overflow-auto px-2">{children} </main>;
 }
diff --git a/app/tools/merge-pdf/page.tsx b/app/tools/merge-pdf/page.tsx
@@ -63,7 +63,7 @@ export default function page() {
         <FileUploader primaryColor="#18c964" acceptedFileTypes={["application/pdf"]} />
         <Spacer y={6} />
         {files.length > 0 ? (
-          <div className="grid grid-cols-2 gap-2">
+          <div className="lg:md:w-[780px]  grid grid-cols-2 gap-2 ">
             <Button color="danger" variant="bordered" onPress={reset}>
               Reset
             </Button>

diff --git a/components/file-uploader/file-uploader.tsx b/components/file-uploader/file-uploader.tsx
@@ -72,6 +72,7 @@ const FileUploader: React.FC<FileUploaderProps> = ({primaryColor, acceptedFileTy
         return {...acc, [fileType]: []};
       }, {}),
       noKeyboard: true,
+
       noClick: true,
       onDropRejected: (fileRejections) => {
         onOpen();
@@ -177,7 +178,7 @@ const FileUploader: React.FC<FileUploaderProps> = ({primaryColor, acceptedFileTy
           measuring={measuring}
         >
           <SortableContext items={items}>
-            <div className="gap-11 mt-0 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-5">
+            <div className="lg:md:w-[780px]  grid   md:lg:grid-cols-4 grid-cols-2  pt-2 justify-items-center">
               {items.map((id, index) => (
                 <SortablePage
                   focusRingColor={primaryColor}
@@ -191,12 +192,12 @@ const FileUploader: React.FC<FileUploaderProps> = ({primaryColor, acceptedFileTy
                 />
               ))}
               {items.length > 0 ? (
-                <div className="m-auto h-44">
+                <div className="m-auto h-44 content-center">
                   <Card
                     onPress={open}
                     isPressable
                     radius="lg"
-                    className="h-32 w-32 bg-center rounded-full    border-dashed border-4 border-gray-300 hover:border-gray-500"
+                    className="h-32 w-32 rounded-full   align-middle   border-dashed border-4 border-gray-300 hover:border-gray-500"
                   >
                     <input {...getInputProps()} />
                     <CardBody
@@ -235,8 +236,9 @@ const FileUploader: React.FC<FileUploaderProps> = ({primaryColor, acceptedFileTy
             borderStyle: "dashed",
             border: "2px dashed ".concat(primaryColor),
           }}
+          className="lg:md:w-[780px]"
         >
-          <CardBody className="items-center justify-center">
+          <CardBody className=" items-center justify-center">
             <input {...getInputProps()} />
 
             <Card onPress={open} className="w-72" isPressable>

diff --git a/components/file-uploader/preview/Page.tsx b/components/file-uploader/preview/Page.tsx
@@ -117,7 +117,7 @@ export const Page = forwardRef<HTMLLIElement, Props>(function Page(
       className={classNames(
         styles.Wrapper,
         active && styles.active,
-        clone && styles.clone,
+        // clone && styles.clone,
         insertPosition === Position.Before && styles.insertBefore,
         insertPosition === Position.After && styles.insertAfter,
       )}
@@ -153,7 +153,7 @@ export const Page = forwardRef<HTMLLIElement, Props>(function Page(
             <div className="text-ellipsis py-2 text-small gap-1 justify-between">
               <p className=" max-h-[3.5rem] truncate font-bold  opacity-75">{file?.name}</p>
 
-              <div className=" m-0  p-0  ">
+              <div className="m-0  p-0">
                 <Chip size="sm" color="success" variant="flat">
                   {file.type ? getFileType(file) : "invalid type"}
                 </Chip>{" "}