Merge pull request #1435 from ipfs-shipyard/bug-1434-viewerheight

Variable viewer height

Author: jessicaschilling

src/files/file-preview/FilePreview.css

@@ -0,0 +1,10 @@
+.FilePreviewPDF {
+  height: calc(100vh - 140px - 5.5rem);  /* 100% of viewport height, minus fixed-height search box and PDF info bar based on font height  */
+  min-height: 100px;
+}
+
+@media only screen and (max-width: 60em) {
+  .FilePreviewPDF {
+    height: calc(100vh - 234px - 14rem);   /* 100% of viewport height, minus fixed-height search box, page nav header, and PDF info bar based on font height  */
+  }
+}

src/files/file-preview/FilePreview.js

@@ -5,6 +5,7 @@ import isBinary from 'is-binary'
 import { Trans, withTranslation } from 'react-i18next'
 import typeFromExt from '../type-from-ext'
 import ComponentLoader from '../../loader/ComponentLoader.js'
+import './FilePreview.css'
 
 class Preview extends React.Component {
   state = {
@@ -32,7 +33,7 @@ class Preview extends React.Component {
         )
       case 'pdf':
         return (
-          <object width='100%' height='500px' data={src} type='application/pdf'>
+          <object className="FilePreviewPDF w-100" data={src} type='application/pdf'>
             {t('noPDFSupport')}
             <a href={src} download target='_blank' rel='noopener noreferrer' className='underline-hover navy-muted'>{t('downloadPDF')}</a>
           </object>