From 843e4b44e65b402863cdc93dd4ee6bf7d4cca944 Mon Sep 17 00:00:00 2001
From: Qiwei Yang <yangqiwei97@gmail.com>
Date: Tue, 23 Aug 2022 14:31:09 +0800
Subject: [PATCH] fix: home page content width & scroll bar problem (#480)

Co-authored-by: Chen Yu <keithwhisper@gmail.com>
---
 components/Header.tsx | 2 +-
 pages/index.tsx       | 6 +++---
 styles/globals.scss   | 5 +++++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 5c8d22f0c..eb916dfd5 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -76,7 +76,7 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
   },
 }))
 
-const StyledMenu = styled((props: MenuProps) => <HoverMenu {...props} />)(({ theme }) => ({
+const StyledMenu = styled((props: MenuProps) => <HoverMenu disableScrollLock={true} {...props} />)(({ theme }) => ({
   '& .MuiPaper-root': {
     borderRadius: theme.spacing(1),
     boxShadow: `0px 4px 9px ${theme.palette.primary.light}`,
diff --git a/pages/index.tsx b/pages/index.tsx
index f458f0096..36dc2f5a8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -636,10 +636,10 @@ const Home = () => {
   return (
     <Box sx={{ pb: { xs: 5, md: 11 } }}>
       <Box sx={{ bgcolor: 'primary.light' }}>
-        <Container sx={{ px: { md: 3, lg: 1 } }}>
+        <Container sx={{ px: { md: 3, lg: 0 } }}>
           <Search />
         </Container>
-        <Container sx={{ px: { md: 3, lg: 1 }, pr: { xs: 0 } }}>
+        <Container sx={{ px: { md: 3, lg: 0 }, pr: { xs: 0 } }}>
           <Stack
             direction="row"
             sx={{ pt: 2.5, pb: 1, overflow: 'hidden' }}
@@ -670,7 +670,7 @@ const Home = () => {
           </Stack>
         </Container>
       </Box>
-      <Container sx={{ px: { md: 2, lg: 1 } }}>
+      <Container sx={{ px: { md: 2, lg: 0 } }}>
         <Stack
           direction={{ xs: 'column', sm: 'column', md: 'column', lg: 'row' }}
           spacing={4}
diff --git a/styles/globals.scss b/styles/globals.scss
index 9091fcb22..92dbaccc7 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -15,6 +15,11 @@
   --amount-frac-color: #938dac;
 }
 
+html {
+  overflow-x: hidden;
+  width: 100vw;
+}
+
 html,
 body {
   font-size: 16px;