use aspect ratios in tailwind 3.0 and remove css hacks

components/FileListing.tsx

@@ -334,7 +334,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     return (
       <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded">
         <div className="dark:border-gray-700 grid items-center grid-cols-12 px-3 space-x-2 border-b border-gray-200">
-          <div className="md:col-span-6 col-span-12 font-bold">Name</div>
+          <div className="md:col-span-6 col-span-12 font-bold py-3">Name</div>
           <div className="md:block hidden col-span-3 font-bold">Last Modified</div>
           <div className="md:block hidden font-bold">Size</div>
           <div className="md:block hidden font-bold">Actions</div>

components/previews/AudioPreview.tsx

@@ -18,7 +18,7 @@ const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
     <>
       <div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded">
         <div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
-          <div className="dark:bg-gray-700 h-72 md:w-40 md:h-36 flex items-center justify-center w-full transition-all duration-75 bg-gray-100 rounded">
+          <div className="dark:bg-gray-700 aspect-square flex items-center justify-center w-full md:w-40 transition-all duration-75 bg-gray-100 rounded">
             {playerStatus === PlayerState.Loading ? (
               <div>
                 <svg

components/previews/MarkdownPreview.tsx

@@ -67,14 +67,14 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
 
   if (error) {
     return (
-      <div className={`${standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}`}>
+      <div className={`${standalone ? 'bg-white dark:bg-gray-900 rounded p-3' : ''}`}>
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className={standalone ? 'shadow bg-white dark:bg-gray-900 rounded p-3' : ''}>
+      <div className={standalone ? 'bg-white dark:bg-gray-900 rounded p-3' : ''}>
         <Loading loadingText="Loading file content..." />
       </div>
     )

components/previews/VideoPreview.tsx

@@ -15,16 +15,14 @@ const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   return (
     <>
       <div className="dark:bg-gray-900 p-3 bg-white rounded">
-        <div className="relative" style={{ paddingTop: '56.25%' }}>
-          <ReactPlayer
-            className="absolute top-0 left-0 w-full h-full"
-            url={file['@microsoft.graph.downloadUrl']}
-            controls
-            width="100%"
-            height="100%"
-            config={{ file: { forceVideo: true } }}
-          />
-        </div>
+        <ReactPlayer
+          className="aspect-video"
+          url={file['@microsoft.graph.downloadUrl']}
+          controls
+          width="100%"
+          height="100%"
+          config={{ file: { forceVideo: true } }}
+        />
       </div>
 
       <div className="flex flex-wrap justify-center mt-4 space-x-2">