Code Review Fixes

src/components/LayoutWithRouting.tsx

@@ -13,36 +13,45 @@ type RouteProps = {
 } & RouteComponentProps
 const Route: React.FC<RouteProps> = ({ Component, ...pathProps }) => {
   return (
-    <MainContainer>
-      <ErrorBoundary
-        FallbackComponent={ViewErrorFallback}
-        onReset={() => {
-          navigate('/')
-        }}
-      >
-        <Component {...pathProps} />
-      </ErrorBoundary>
-    </MainContainer>
+    <ErrorBoundary
+      FallbackComponent={ViewErrorFallback}
+      onReset={() => {
+        navigate('/')
+      }}
+    >
+      <Component {...pathProps} />
+    </ErrorBoundary>
   )
 }
 
 const LayoutWithRouting: React.FC = () => (
   <>
     <GlobalStyle />
-
-    <Navbar default />
-    <Router primary={false}>
-      <Route default Component={HomeView} />
-      <Route path={routes.video()} Component={VideoView} />
-      <Route path={routes.search()} Component={SearchView} />
-      <Route Component={BrowseView} path={routes.browse()} />
-      <Route Component={ChannelView} path={routes.channel()} />
-    </Router>
+    <GlobalContainer>
+      <Navbar default />
+      <MainContainer>
+        <Router primary={false}>
+          <Route default Component={HomeView} />
+          <Route path={routes.video()} Component={VideoView} />
+          <Route path={routes.search()} Component={SearchView} />
+          <Route Component={BrowseView} path={routes.browse()} />
+          <Route Component={ChannelView} path={routes.channel()} />
+        </Router>
+      </MainContainer>
+    </GlobalContainer>
   </>
 )
 
+const GlobalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 100vh;
+`
+
 const MainContainer = styled.main`
   padding: 0 var(--global-horizontal-padding);
+  overflow: auto;
 `
 
 export default LayoutWithRouting

src/components/Navbar/Navbar.style.tsx

@@ -8,7 +8,7 @@ import { Link } from '@reach/router'
 type NavbarStyleProps = {
   hasFocus: boolean
 }
-export const NAVBAR_HEIGHT = 69
+
 export const Logo = styled(UnstyledLogo)`
   width: ${sizes.b12}px;
   height: ${sizes.b12}px;
@@ -77,9 +77,6 @@ export const StyledLink = styled(Link)`
 `
 
 export const Header = styled.header<NavbarStyleProps>`
-  position: sticky;
-  top: 0;
-  z-index: 99;
   display: grid;
   width: 100%;
 

src/components/Navbar/index.ts

@@ -1,3 +1,3 @@
 import Navbar from './Navbar'
-export { NAVBAR_HEIGHT } from './Navbar.style'
+
 export default Navbar

src/views/BrowseView.tsx

@@ -4,7 +4,6 @@ import { RouteComponentProps } from '@reach/router'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import { ErrorFallback } from '@/components'
-import { NAVBAR_HEIGHT } from '@/components/Navbar'
 import { CategoryPicker, InfiniteVideoGrid, Typography } from '@/shared/components'
 import { colors, sizes } from '@/shared/theme'
 import { useQuery } from '@apollo/client'
@@ -53,7 +52,7 @@ const Header = styled(Typography)`
 const StyledCategoryPicker = styled(CategoryPicker)`
   z-index: 10;
   position: sticky;
-  top: ${NAVBAR_HEIGHT}px;
+  top: 0;
   padding: ${sizes.b5}px ${sizes.b8}px ${sizes.b2}px;
   margin: 0 calc(-1 * var(--global-horizontal-padding));
   background-color: ${colors.black};