sticky download button so long previews doesn't push buttons down, closes #205

components/previews/AudioPreview.tsx

@@ -73,7 +73,8 @@ const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           </div>
         </div>
       </div>
-      <div className="mt-4">
+
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
     </>

components/previews/CodePreview.tsx

@@ -32,16 +32,16 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
   }
 
   return (
-    <>
+    <div>
       <div className="markdown-body p-3 bg-gray-900 rounded">
         <pre className={`language-${getExtension(file.name)}`}>
           <code>{data}</code>
         </pre>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 

components/previews/EPUBPreview.tsx

@@ -32,7 +32,7 @@ const EPUBPreview: FunctionComponent<{file: any}> = ({ file }) => {
   }
 
   return (
-    <>
+    <div>
       <div
         className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded"
         style={{ maxHeight: '90vh' }}
@@ -51,10 +51,10 @@ const EPUBPreview: FunctionComponent<{file: any}> = ({ file }) => {
           </div>
         </div>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 

components/previews/MarkdownPreview.tsx

@@ -81,7 +81,7 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
   }
 
   return (
-    <>
+    <div>
       <div
         className={
           standalone
@@ -99,11 +99,11 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
         </ReactMarkdown>
       </div>
       {standalone && (
-        <div className="mt-4">
+        <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
           <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
         </div>
       )}
-    </>
+    </div>
   )
 }
 

components/previews/OfficePreview.tsx

@@ -12,14 +12,18 @@ const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
   }, [])
 
   return (
-    <>
+    <div>
       <div className="overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}>
-        <Preview url={encodeURIComponent(file['@microsoft.graph.downloadUrl'])} width={docContainerWidth.toString()} height="800" />
+        <Preview
+          url={encodeURIComponent(file['@microsoft.graph.downloadUrl'])}
+          width={docContainerWidth.toString()}
+          height="600"
+        />
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 

components/previews/PDFPreview.tsx

@@ -9,14 +9,14 @@ const PDFEmbedPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   )}`
 
   return (
-    <>
-      <div className="w-full rounded overflow-hidden" style={{ height: '80vh' }}>
+    <div>
+      <div className="w-full rounded overflow-hidden" style={{ height: '90vh' }}>
         <iframe src={url} frameBorder="0" width="100%" height="100%"></iframe>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 

components/previews/TextPreview.tsx

@@ -23,14 +23,14 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   }
 
   return (
-    <>
+    <div>
       <div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded">
         <pre className="md:p-3 p-0 overflow-scroll">{data}</pre>
       </div>
-      <div className="mt-4">
+      <div className="border-t-gray-200 dark:border-t-gray-700 border-t p-2 sticky bottom-0 left-0 right-0 z-10 bg-white bg-opacity-80 backdrop-blur-md dark:bg-gray-900">
         <DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
       </div>
-    </>
+    </div>
   )
 }
 

components/previews/VideoPreview.tsx

@@ -1,9 +1,7 @@
 import { FunctionComponent } from 'react'
 import ReactPlayer from 'react-player'
-import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useClipboard } from 'use-clipboard-copy'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import toast, { Toaster } from 'react-hot-toast'
 
 import { getBaseUrl } from '../../utils/getBaseUrl'