fix: file preview & selected items panel size on mobile (#1492)

standardnotes · Sep 7, 2022 · ecd870c · ecd870c
1 parent 4617afe
commit ecd870c
Show file tree

Hide file tree

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