From a9128a073328983a66169232ffe94ac032165db8 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 16 Mar 2023 17:01:53 +0800
Subject: [PATCH] Use vh to force the PDF container height

---
 .../templates/article/PdfArticleContainer.tsx | 21 ++++++++++++++-----
 .../templates/homeFeed/HeaderSpacer.tsx       |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx
index e297c1ded..80e0c3aec 100644
--- a/packages/web/components/templates/article/PdfArticleContainer.tsx
+++ b/packages/web/components/templates/article/PdfArticleContainer.tsx
@@ -17,6 +17,7 @@ import { pspdfKitKey } from '../../../lib/appConfig'
 import { NotebookModal } from './NotebookModal'
 import { HighlightNoteModal } from './HighlightNoteModal'
 import { showErrorToast } from '../../../lib/toastHelpers'
+import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
 
 export type PdfArticleContainerProps = {
   viewerUsername: string
@@ -29,12 +30,14 @@ export default function PdfArticleContainer(
   props: PdfArticleContainerProps
 ): JSX.Element {
   const containerRef = useRef<HTMLDivElement | null>(null)
-  const [shareTarget, setShareTarget] =
-    useState<Highlight | undefined>(undefined)
+  const [shareTarget, setShareTarget] = useState<Highlight | undefined>(
+    undefined
+  )
   const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
   const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
-  const [noteTargetPageIndex, setNoteTargetPageIndex] =
-    useState<number | undefined>(undefined)
+  const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
+    number | undefined
+  >(undefined)
   const highlightsRef = useRef<Highlight[]>([])
   const canShareNative = useCanShareNative()
 
@@ -454,7 +457,15 @@ export default function PdfArticleContainer(
   // should be handled by the PSPDFKit instance callbacks.
 
   return (
-    <Box css={{ width: '100%', height: '100%' }}>
+    <Box
+      css={{
+        width: '100%',
+        height: `calc(100vh - ${HEADER_HEIGHT})`,
+        '@xlgDown': {
+          height: `calc(100vh - ${MOBILE_HEADER_HEIGHT})`,
+        },
+      }}
+    >
       <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
       {noteTarget && (
         <HighlightNoteModal
diff --git a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
index 51d47210c..723396c4c 100644
--- a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
+++ b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
@@ -9,7 +9,7 @@ export function HeaderSpacer(): JSX.Element {
       css={{
         height: HEADER_HEIGHT,
         bg: '$grayBase',
-        '@mdDown': {
+        '@xlgDown': {
           height: MOBILE_HEADER_HEIGHT,
         },
       }}