From 89d59be1f251b049e2f491599d7685afb4dcef41 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 21 Mar 2023 12:57:10 +0800
Subject: [PATCH] Improve the height of the header in the library

We need to handle library headers and PDF headers differently.
---
 .../templates/article/PdfHeaderSpacer.tsx      | 18 ++++++++++++++++++
 .../templates/homeFeed/HeaderSpacer.tsx        |  2 +-
 packages/web/pages/[username]/[slug]/index.tsx |  4 ++--
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/components/templates/article/PdfHeaderSpacer.tsx

diff --git a/packages/web/components/templates/article/PdfHeaderSpacer.tsx b/packages/web/components/templates/article/PdfHeaderSpacer.tsx
new file mode 100644
index 000000000..c4eea6da1
--- /dev/null
+++ b/packages/web/components/templates/article/PdfHeaderSpacer.tsx
@@ -0,0 +1,18 @@
+import { Box } from '../../elements/LayoutPrimitives'
+
+export const HEADER_HEIGHT = '105px'
+export const MOBILE_HEADER_HEIGHT = '70px'
+
+export function PdfHeaderSpacer(): JSX.Element {
+  return (
+    <Box
+      css={{
+        height: HEADER_HEIGHT,
+        bg: '$grayBase',
+        '@xlgDown': {
+          height: MOBILE_HEADER_HEIGHT,
+        },
+      }}
+    ></Box>
+  )
+}
diff --git a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
index 723396c4c..51d47210c 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',
-        '@xlgDown': {
+        '@mdDown': {
           height: MOBILE_HEADER_HEIGHT,
         },
       }}
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 0b61ef31c..73ccd48bd 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -37,7 +37,7 @@ import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMu
 import { ReaderHeader } from '../../../components/templates/reader/ReaderHeader'
 import { EditArticleModal } from '../../../components/templates/homeFeed/EditItemModals'
 import { VerticalArticleActionsMenu } from '../../../components/templates/article/VerticalArticleActions'
-import { HeaderSpacer } from '../../../components/templates/homeFeed/HeaderSpacer'
+import { PdfHeaderSpacer } from '../../../components/templates/article/PdfHeaderSpacer'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -318,7 +318,7 @@ export default function Home(): JSX.Element {
         />
       </ReaderHeader>
 
-      {article?.contentReader == 'PDF' && <HeaderSpacer />}
+      {article?.contentReader == 'PDF' && <PdfHeaderSpacer />}
 
       <VStack
         distribution="between"