Set the header height to default on smaller screens

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>
   )

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"

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,
           },
         }}
       >