Can access filters after scrolling past them on browse view

Fixes #166
andrew-codes · Feb 7, 2024 · a0274a3 · a0274a3
1 parent 6d318d5
commit a0274a3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/apps/playnite-web/src/components/Header.tsx b/apps/playnite-web/src/components/Header.tsx
@@ -38,13 +38,12 @@ const Header: FC<PropsWithChildren<{ showFilters?: boolean }>> = ({
         sx={(theme) => ({
           display: 'flex',
           flexDirection: 'column',
-          position: 'sticky',
           paddingTop: theme.spacing(4),
           top: 0,
           zIndex: 1000,
           backgroundColor: theme.palette.background.default,
-          [theme.breakpoints.down('lg')]: {
-            position: 'initial',
+          [theme.breakpoints.up('lg')]: {
+            position: 'sticky',
           },
         })}
       >

diff --git a/apps/playnite-web/src/components/MyLibrary.tsx b/apps/playnite-web/src/components/MyLibrary.tsx
@@ -8,6 +8,7 @@ import Header from '../components/Header'
 import FilteredGameList from '../domain/FilteredGameList'
 import GameList from '../domain/GameList'
 import type { GameOnPlatform } from '../domain/types'
+import useThemeWidth from './useThemeWidth'
 
 const MyLibrary: FC<{ gamesOnPlatforms: GameOnPlatform[] }> = ({
   gamesOnPlatforms = [] as GameOnPlatform[],
@@ -24,6 +25,8 @@ const MyLibrary: FC<{ gamesOnPlatforms: GameOnPlatform[] }> = ({
 
   const noDeferCount = 25
 
+  const width = useThemeWidth()
+
   return (
     <>
       <Helmet>
@@ -39,11 +42,14 @@ const MyLibrary: FC<{ gamesOnPlatforms: GameOnPlatform[] }> = ({
           ))}
       </Helmet>
       <Box
-        sx={{
+        sx={(theme) => ({
           display: 'flex',
           flexDirection: 'column',
-          height: `calc(100vh - 48px - 48px)`,
-        }}
+          height: `calc(100vh - ${theme.spacing(12)})`,
+          padding: `0 ${theme.spacing()} 0 ${theme.spacing(2)}`,
+          overflowY: 'auto',
+          scrollbarColor: `${theme.palette.text.primary} ${theme.palette.background.default}`,
+        })}
       >
         <Header showFilters>
           <div>
@@ -53,7 +59,7 @@ const MyLibrary: FC<{ gamesOnPlatforms: GameOnPlatform[] }> = ({
             </Typography>
           </div>
         </Header>
-        <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
+        <Box sx={{ flexGrow: 1, maxWidth: `${width}px`, margin: '0 auto' }}>
           <GameGrid games={filteredGames} noDeferCount={noDeferCount} />
         </Box>
       </Box>

diff --git a/apps/playnite-web/src/components/Navigation/Drawer.tsx b/apps/playnite-web/src/components/Navigation/Drawer.tsx
@@ -1,6 +1,5 @@
 import { Box, useMediaQuery, useTheme } from '@mui/material'
 import { FC, PropsWithChildren, ReactNode } from 'react'
-import useThemeWidth from '../useThemeWidth'
 import MobileDrawerNavigation from './MobileDrawerNavigation'
 import NonMobileDrawerNavigation from './NonMobileDrawerNavigation'
 
@@ -14,16 +13,13 @@ const Drawer: FC<PropsWithChildren<{ title?: ReactNode }>> = ({
     ? MobileDrawerNavigation
     : NonMobileDrawerNavigation
 
-  const width = useThemeWidth()
-
   return (
     <Drawer title={title}>
       <Box
         component={'main'}
         sx={(theme) => ({
           flexGrow: 1,
           margin: '0 auto',
-          maxWidth: `${width}px`,
           [theme.breakpoints.up('xs')]: {
             padding: '0',
           },
@@ -34,10 +30,10 @@ const Drawer: FC<PropsWithChildren<{ title?: ReactNode }>> = ({
             padding: '0',
           },
           [theme.breakpoints.up('lg')]: {
-            padding: '48px 0 48px 72px',
+            padding: '48px 0 48px 88px',
           },
           [theme.breakpoints.up('xl')]: {
-            padding: '48px 0 48px 72px',
+            padding: '48px 0 48px 88px',
           },
           [theme.breakpoints.down('xs')]: {
             padding: '0',