audio and video preview, mobile compatibility

pages/[...path].tsx

@@ -18,7 +18,7 @@ export default function Folders() {
 
       <main className="flex flex-col w-full flex-1 bg-gray-50">
         <Navbar />
-        <div className="mx-auto w-full max-w-4xl mb-8">
+        <div className="mx-auto w-full max-w-4xl p-4">
           <Breadcrumb query={query} />
           <FileListing query={query} />
         </div>

pages/_app.tsx

@@ -13,8 +13,8 @@ import {
   faFileAlt,
   faFile,
   faFolder,
-  faCaretSquareDown,
 } from '@fortawesome/free-regular-svg-icons'
+import { faMusic } from '@fortawesome/free-solid-svg-icons'
 import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
 
 import type { AppProps } from 'next/app'
@@ -34,7 +34,7 @@ library.add(
   faFolder,
   faGithub,
   faMarkdown,
-  faCaretSquareDown
+  faMusic
 )
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/index.tsx

@@ -15,7 +15,7 @@ export default function Home() {
 
       <main className="flex flex-col w-full flex-1 bg-gray-50">
         <Navbar />
-        <div className="mx-auto w-full max-w-4xl mb-8">
+        <div className="mx-auto w-full max-w-4xl p-4">
           <Breadcrumb />
           <FileListing />
         </div>