Fix ui on documents list page

components/documents/documents-list.tsx

@@ -347,7 +347,7 @@ export function DocumentsList({
                 },
               }}
             >
-              <div className="space-y-4 pb-3">
+              <div className="space-y-4">
                 {/* Folders list */}
                 <ul role="list" className="space-y-4">
                   {folders

components/upload-zone.tsx

@@ -643,36 +643,42 @@ export default function UploadZone({
   return (
     <div
       {...getRootProps({ onClick: (evt) => evt.stopPropagation() })}
-      className="relative h-full min-h-[calc(100vh-350px)]"
+      className={cn(
+        "relative",
+        dataroomId ? "min-h-[calc(100vh-350px)]" : "min-h-[calc(100vh-270px)]",
+      )}
     >
       <div
         className={cn(
-          "absolute bottom-0 left-0 right-0 top-0 z-50",
-          isDragActive ? "pointer-events-auto" : "pointer-events-none",
+          "absolute inset-0 z-40 -m-1 rounded-lg border-2 border-dashed",
+          isDragActive
+            ? "pointer-events-auto border-primary/50 bg-gray-100/75 backdrop-blur-sm dark:bg-gray-800/75"
+            : "pointer-events-none border-none",
         )}
       >
-        <div
-          className={cn(
-            "-m-1 hidden h-full items-center justify-center border-dashed bg-gray-100 text-center dark:border-gray-300 dark:bg-gray-400",
-            isDragActive && "flex",
-          )}
-        >
-          <input
-            {...getInputProps()}
-            name="file"
-            id="upload-multi-files-zone"
-            className="sr-only"
-          />
-
-          <div className="mt-4 flex flex-col text-sm leading-6 text-gray-800">
-            <span className="mx-auto">Drop your file(s) to upload here</span>
-            <p className="text-xs leading-5 text-gray-800">
-              {isFreePlan && !isTrial
-                ? `Only *.pdf, *.xls, *.xlsx, *.csv, *.ods, *.png, *.jpeg, *.jpg`
-                : `Only *.pdf, *.pptx, *.docx, *.xlsx, *.xls, *.csv, *.ods, *.ppt, *.odp, *.doc, *.odt, *.dwg, *.dxf, *.png, *.jpg, *.jpeg, *.mp4, *.mov, *.avi, *.webm, *.ogg`}
-            </p>
+        <input
+          {...getInputProps()}
+          name="file"
+          id="upload-multi-files-zone"
+          className="sr-only"
+        />
+
+        {isDragActive && (
+          <div className="sticky top-1/2 z-50 -translate-y-1/2 px-2">
+            <div className="flex justify-center">
+              <div className="inline-flex flex-col rounded-lg bg-background/95 px-6 py-4 text-center ring-1 ring-gray-900/5 dark:bg-gray-900/95 dark:ring-white/10">
+                <span className="font-medium text-foreground">
+                  Drop your file(s) here
+                </span>
+                <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                  {isFreePlan && !isTrial
+                    ? `Only *.pdf, *.xls, *.xlsx, *.csv, *.ods, *.png, *.jpeg, *.jpg`
+                    : `Only *.pdf, *.pptx, *.docx, *.xlsx, *.xls, *.csv, *.ods, *.ppt, *.odp, *.doc, *.odt, *.dwg, *.dxf, *.png, *.jpg, *.jpeg, *.mp4, *.mov, *.avi, *.webm, *.ogg`}
+                </p>
+              </div>
+            </div>
           </div>
-        </div>
+        )}
       </div>
 
       {children}

pages/documents/index.tsx

@@ -20,7 +20,7 @@ export default function Documents() {
 
   return (
     <AppLayout>
-      <div className="sticky top-0 bg-white p-4 pb-0 dark:bg-gray-900 sm:mx-4 sm:pt-8">
+      <div className="sticky top-0 mb-4 min-h-[calc(100vh-72px)] rounded-lg bg-white p-4 dark:bg-gray-900 sm:mx-4 sm:pt-8">
         <section className="mb-4 flex items-center justify-between space-x-2 sm:space-x-0">
           <div className="space-y-0 sm:space-y-1">
             <h2 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">