From ecd870cdaa86c7ec71a0db58643390fe5d597146 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 7 Sep 2022 18:02:37 +0530
Subject: [PATCH] fix: file preview & selected items panel size on mobile
 (#1492)

---
 .../Components/FileView/FileViewWithoutProtection.tsx         | 4 +++-
 .../MultipleSelectedFiles/MultipleSelectedFiles.tsx           | 2 +-
 .../MultipleSelectedNotes/MultipleSelectedNotes.tsx           | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx b/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
index 2bce7418f..cdb84add4 100644
--- a/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
+++ b/packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
@@ -60,7 +60,9 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
           </div>
         </div>
       </div>
-      <FilePreview file={file} application={application} key={file.uuid} />
+      <div className="flex min-h-screen flex-col md:min-h-full md:flex-grow">
+        <FilePreview file={file} application={application} key={file.uuid} />
+      </div>
     </div>
   )
 }
diff --git a/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx b/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx
index 7aeafb557..4be0adeb3 100644
--- a/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx
+++ b/packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx
@@ -26,7 +26,7 @@ const MultipleSelectedFiles = ({ filesController, selectionController }: Props)
           <FileOptionsPanel filesController={filesController} selectionController={selectionController} />
         </div>
       </div>
-      <div className="flex w-full max-w-md flex-grow flex-col items-center justify-center">
+      <div className="flex min-h-screen w-full max-w-md flex-grow flex-col items-center justify-center md:min-h-0">
         <IlNotesIcon className="block" />
         <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected files</h2>
         <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected files.</p>
diff --git a/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx b/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
index c07748036..a6c136af2 100644
--- a/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
+++ b/packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
@@ -72,7 +72,7 @@ const MultipleSelectedNotes = ({
           />
         </div>
       </div>
-      <div className="flex w-full max-w-md flex-grow flex-col items-center justify-center">
+      <div className="flex min-h-screen w-full max-w-md flex-grow flex-col items-center justify-center md:min-h-0">
         <IlNotesIcon className="block" />
         <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected notes</h2>
         <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected notes.</p>