From 090047f8be903c3ae32746441caa87d0e32e2c6e Mon Sep 17 00:00:00 2001
From: Haseeb Adil Khan <haseebadilkhan@gmail.com>
Date: Tue, 24 Oct 2023 00:03:56 -0600
Subject: [PATCH] fix content over-scrolling

---
 src/components/CreateMapathon/index.js | 28 +++-----------------------
 src/components/NavBar/Container.js     |  4 ----
 src/components/NavBar/Wrapper.js       | 18 ++++++++---------
 3 files changed, 12 insertions(+), 38 deletions(-)

diff --git a/src/components/CreateMapathon/index.js b/src/components/CreateMapathon/index.js
index 0fb806b5..994ae303 100644
--- a/src/components/CreateMapathon/index.js
+++ b/src/components/CreateMapathon/index.js
@@ -54,39 +54,17 @@ class CreateMapathon extends Component {
   render() {
     const {formatMessage} = this.context.intl
 
-    return (
-      <Wrapper>
+    return <Wrapper>
         <Helmet title={formatMessage(messages.pageTitle)} />
 
         <TopBar hideOn="phone,tablet" />
 
-        <NavBar
-          hideOn="desktop,widescreen"
-          isNarrow
-          title={formatMessage(messages.headerTitle)}
-          goBackHandler={() => this.props.history.goBack()}
-        />
+        <NavBar hideOn="desktop,widescreen" isNarrow="true" title={formatMessage(messages.headerTitle)} goBackHandler={() => this.props.history.goBack()} />
 
-        <Form
-          sendingRequest={this.props.sendingRequest}
-          poster={this.props.poster}
-          locationCoordinates={this.props.locationCoordinates}
-          errors={this.props.errors}
-          loadingTeams={this.props.loadingTeams}
-          teams={this.props.teams}
-          getUserLocation={this.props.getUserLocation}
-          setNotificationMessage={this.props.setNotificationMessage}
-          clearError={this.props.clearError}
-          createPoster={this.props.createPoster}
-          deletePoster={this.props.deletePoster}
-          setLocationCoordinates={this.props.setLocationCoordinates}
-          getTeams={this.props.getTeams}
-          createMapathon={this.props.createMapathon}
-        />
+        <Form sendingRequest={this.props.sendingRequest} poster={this.props.poster} locationCoordinates={this.props.locationCoordinates} errors={this.props.errors} loadingTeams={this.props.loadingTeams} teams={this.props.teams} getUserLocation={this.props.getUserLocation} setNotificationMessage={this.props.setNotificationMessage} clearError={this.props.clearError} createPoster={this.props.createPoster} deletePoster={this.props.deletePoster} setLocationCoordinates={this.props.setLocationCoordinates} getTeams={this.props.getTeams} createMapathon={this.props.createMapathon} />
 
         <Footer hideOn="phone,tablet" isNarrow />
       </Wrapper>
-    )
   }
 }
 
diff --git a/src/components/NavBar/Container.js b/src/components/NavBar/Container.js
index dda20475..e7e4ad97 100644
--- a/src/components/NavBar/Container.js
+++ b/src/components/NavBar/Container.js
@@ -12,10 +12,6 @@ const Container = styled.div`
 
   height: 100%;
   width: 100%;
-
-  ${media.tablet`
-    width: ${props => (props.isNarrow ? '723px' : '100%')};
-  `};
 `
 
 export default Container
diff --git a/src/components/NavBar/Wrapper.js b/src/components/NavBar/Wrapper.js
index 6e69573d..f1bbf60c 100755
--- a/src/components/NavBar/Wrapper.js
+++ b/src/components/NavBar/Wrapper.js
@@ -6,25 +6,25 @@ const Wrapper = styled.div`
   left: 0;
   position: fixed;
   top: 0;
-  z-index: 10; 
-  display: ${props => (props.hideOn.includes('phone') ? 'none' : 'flex')}; 
+  z-index: 10;
+  display: ${(props) => (props.hideOn.includes('phone') ? 'none' : 'flex')};
   align-items: center;
-  justify-content: center; 
-  //box-shadow: 0 1px 0 0 ${colors.grey};
+  justify-content: center;
+  box-shadow: 0 1px 0 0 ${colors.grey};
   height: 4rem;
-  width: 100%; 
-  background-color: transparent;
+  width: 100%;
+  background-color: white;
 
   ${media.tablet`
-    display: ${props => (props.hideOn.includes('tablet') ? 'none' : 'flex')};
+    display: ${(props) => (props.hideOn.includes('tablet') ? 'none' : 'flex')};
   `};
 
   ${media.desktop`
-    display: ${props => (props.hideOn.includes('desktop') ? 'none' : 'flex')};
+    display: ${(props) => (props.hideOn.includes('desktop') ? 'none' : 'flex')};
   `};
 
   ${media.widescreen`
-    display: ${props =>
+    display: ${(props) =>
       props.hideOn.includes('widescreen') ? 'none' : 'flex'};
   `};
 `