Fixed #226 - Adjust the overflowY property in the main file.

linea-it · Mar 18, 2024 · 05c72f4 · 05c72f4
1 parent 08afdc7
commit 05c72f4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
@@ -1,5 +1,6 @@
 import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider } from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
@@ -18,6 +19,7 @@ export default function MyApp(props) {
   const { Component, pageProps } = props
   const route = useRouter()
   const [darkMode, setDarkMode] = useState(false)
+  const [scrollNeeded, setScrollNeeded] = useState(false)
 
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
@@ -29,8 +31,22 @@ export default function MyApp(props) {
     if (darkModePreference) {
       setDarkMode(darkModePreference === '1')
     }
+
+    handleScroll()
   }, [])
 
+  useEffect(() => {
+    handleScroll()
+  }, [route.pathname])
+
+  const handleScroll = () => {
+    const contentHeight = document.body.scrollHeight
+    const windowHeight = window.innerHeight
+    const hasVerticalScrollbar = contentHeight > windowHeight
+
+    setScrollNeeded(hasVerticalScrollbar)
+  }
+
   return (
     <>
       <Head>
@@ -43,12 +59,13 @@ export default function MyApp(props) {
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
           <CssBaseline />
-          <div
+          <Box
             style={{
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'space-between',
-              height: '100%'
+              minHeight: '100vh',
+              overflowY: scrollNeeded ? 'auto' : 'hidden'
             }}
           >
             <AuthProvider>
@@ -62,7 +79,7 @@ export default function MyApp(props) {
               <Component {...pageProps} />
               {route.pathname !== '/login' && <Footer />}
             </AuthProvider>
-          </div>
+          </Box>
         </ThemeProvider>
       </QueryClientProvider>
     </>

diff --git a/frontend/pages/tutorials.js b/frontend/pages/tutorials.js
@@ -14,7 +14,7 @@ export default function Tutorials() {
   const classes = useStyles()
 
   return (
-    <Container className={classes.root}>
+    <Container className={classes.root} sx={{ overflowY: 'hidden' }}>
       <Grid container spacing={8}>
         <Grid item xs={12}>
           <Breadcrumbs aria-label="breadcrumb">