From e3383d28d8e5452644ac0b15796c379cfec6f905 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 Nov 2023 15:02:05 +0800
Subject: [PATCH] Set the header height to default on smaller screens

---
 .../web/components/templates/homeFeed/HeaderSpacer.tsx    | 3 +++
 .../components/templates/homeFeed/HighlightsLayout.tsx    | 8 +++++++-
 .../web/components/templates/homeFeed/LibraryHeader.tsx   | 7 ++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
index 43671f53e..998878190 100644
--- a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
+++ b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
@@ -29,6 +29,9 @@ export function HeaderSpacer(): JSX.Element {
       css={{
         height: headerHeight,
         bg: '$grayBase',
+        '@mdDown': {
+          height: DEFAULT_HEADER_HEIGHT,
+        },
       }}
     ></Box>
   )
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index 12a16849f..e0f363ec3 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -20,7 +20,7 @@ import {
 import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
 import { NotebookContent } from '../article/Notebook'
 import { EmptyHighlights } from './EmptyHighlights'
-import { useGetHeaderHeight } from './HeaderSpacer'
+import { DEFAULT_HEADER_HEIGHT, useGetHeaderHeight } from './HeaderSpacer'
 import { highlightsAsMarkdown } from './HighlightItem'
 
 type HighlightItemsLayoutProps = {
@@ -107,6 +107,9 @@ export function HighlightItemsLayout(
         css={{
           width: '100%',
           height: `calc(100vh - ${headerHeight})`,
+          '@mdDown': {
+            height: DEFAULT_HEADER_HEIGHT,
+          },
         }}
       >
         <EmptyHighlights />
@@ -125,6 +128,9 @@ export function HighlightItemsLayout(
           },
           bg: '$thBackground2',
           overflow: 'hidden',
+          '@mdDown': {
+            height: DEFAULT_HEADER_HEIGHT,
+          },
         }}
         distribution="start"
         alignment="start"
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 43c7bb072..22be48f8c 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -16,7 +16,11 @@ import {
 import { LayoutType } from './HomeFeedContainer'
 import { PrimaryDropdown } from '../PrimaryDropdown'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
-import { HeaderSpacer, useGetHeaderHeight } from './HeaderSpacer'
+import {
+  DEFAULT_HEADER_HEIGHT,
+  HeaderSpacer,
+  useGetHeaderHeight,
+} from './HeaderSpacer'
 import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
 import { CardCheckbox } from '../../patterns/LibraryCards/LibraryCardStyles'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
@@ -104,6 +108,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           '@mdDown': {
             left: '0px',
             right: '0',
+            height: DEFAULT_HEADER_HEIGHT,
           },
         }}
       >