From debef82ce00cfaa4c356ad6d8466285ea6bf832d Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Fri, 25 Jun 2021 00:47:57 +0100
Subject: [PATCH] fix mobile hidden visibility

---
 components/FileListing.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 656a764..8018250 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -65,13 +65,13 @@ const FileListItem: FunctionComponent<{
         </div>
         <div className="truncate">{c.name}</div>
       </div>
-      <div className="invisible md:visible font-mono text-sm col-span-2 text-gray-700">
+      <div className="hidden md:block font-mono text-sm col-span-2 text-gray-700">
         {new Date(c.lastModifiedDateTime).toLocaleString(undefined, {
           dateStyle: 'short',
           timeStyle: 'short',
         })}
       </div>
-      <div className="invisible md:visible font-mono text-sm text-gray-700">{humanFileSize(c.size)}</div>
+      <div className="hidden md:block font-mono text-sm text-gray-700">{humanFileSize(c.size)}</div>
     </div>
   )
 }
@@ -130,8 +130,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
       <div className="bg-white shadow rounded">
         <div className="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200">
           <div className="col-span-10 md:col-span-7 font-bold">Name</div>
-          <div className="invisible md:visible font-bold col-span-2">Last Modified</div>
-          <div className="invisible md:visible font-bold">Size</div>
+          <div className="hidden md:block font-bold col-span-2">Last Modified</div>
+          <div className="hidden md:block font-bold">Size</div>
         </div>
 
         {imagesInFolder.length !== 0 && (
@@ -197,6 +197,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
         case preview.video:
           return <VideoPreview file={resp} />
+
         case preview.audio:
           return <AudioPreview file={resp} />