Some fixes for responsive

packages/web/components/templates/NavigationLayout.tsx

@@ -1,10 +1,10 @@
 import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData'
-import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
+import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { ReactNode, useEffect, useState, useCallback } from 'react'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { NextRouter, useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { setupAnalytics } from '../../lib/analytics'
@@ -19,8 +19,6 @@ import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
 import { Button } from '../elements/Button'
 import { List } from '@phosphor-icons/react'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
-import 'allotment/dist/style.css'
-import { LibrarySideBar } from './library/LibrarySideBar'
 
 export type NavigationSection =
   | 'home'
@@ -122,11 +120,19 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
       {props.pageMetaDataProps ? (
         <PageMetaData {...props.pageMetaDataProps} />
       ) : null}
-      <Header
-        toggleMenu={() => {
-          setShowNavMenu(!showNavMenu)
+      <SpanBox
+        css={{
+          '@lgDown': {
+            display: 'none',
+          },
         }}
-      />
+      >
+        <Header
+          toggleMenu={() => {
+            setShowNavMenu(!showNavMenu)
+          }}
+        />
+      </SpanBox>
       {showNavMenu && (
         <NavigationMenu
           section={props.section}

packages/web/components/templates/library/LibraryContainer.tsx

@@ -926,6 +926,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         px: '20px',
         py: '20px',
         width: '100%',
+        '@mdDown': {
+          px: '0px',
+        },
       }}
       distribution="start"
       alignment="start"
@@ -1189,6 +1192,10 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         '@lgDown': {
           px: '10px',
         },
+        '@mdDown': {
+          px: '0px',
+          gap: '0px',
+        },
         gridTemplateColumns:
           props.layout == 'LIST_LAYOUT'
             ? 'none'

packages/web/components/templates/library/LibraryHeader.tsx

@@ -133,7 +133,7 @@ const HeaderControls = (props: LibraryHeaderProps): JSX.Element => {
         <SpanBox
           css={{
             display: 'none',
-            '@mdDown': { display: 'flex' },
+            '@lgDown': { display: 'flex' },
           }}
         >
           <MenuHeaderButton {...props} />