From 11917f00d9d7966d3e527d928da6fe24b4154669 Mon Sep 17 00:00:00 2001
From: Haseeb Adil Khan <haseebadilkhan@gmail.com>
Date: Mon, 23 Oct 2023 23:59:07 -0600
Subject: [PATCH 1/2] fix button sizing and reformat code

---
 src/components/CreateMapathon/Step.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/CreateMapathon/Step.js b/src/components/CreateMapathon/Step.js
index b1114c5..5a31a01 100644
--- a/src/components/CreateMapathon/Step.js
+++ b/src/components/CreateMapathon/Step.js
@@ -73,6 +73,7 @@ const ButtonWrapper = styled.div`
 `
 
 const ButtonContent = styled.div`
+  width: 7rem;
   align-items: center;
   justify-content: space-between;
 `
@@ -114,7 +115,7 @@ class Step extends Component {
             {this.props.isFirstStep ? (
               <ButtonWrapper>
                 <Button
-                  className="primary-btn mx-auto is-quarter"
+                  className="primary-btn mx-auto"
                   float
                   onClickHandler={() => this.props.goNextStep()}
                   disabled={!this.props.isFilled || this.props.sendingRequest}
@@ -129,7 +130,7 @@ class Step extends Component {
             ) : this.props.isLastStep ? (
               <ButtonWrapper>
                 <Button
-                  className="gray300-btn mx-auto is-quarter"
+                  className="gray300-btn mx-auto"
                   float
                   disabled={this.props.sendingRequest}
                   onClickHandler={() => this.props.goPrevStep()}
@@ -141,7 +142,7 @@ class Step extends Component {
                   </ButtonContent>
                 </Button>
                 <Button
-                  className="primary-btn mx-auto is-quarter"
+                  className="primary-btn mx-auto"
                   type="submit"
                   float
                   disabled={this.props.sendingRequest}
@@ -157,7 +158,7 @@ class Step extends Component {
             ) : (
               <ButtonWrapper>
                 <Button
-                  className="gray300-btn mx-auto is-quarter"
+                  className="gray300-btn mx-auto"
                   disabled={this.props.sendingRequest}
                   onClickHandler={() => this.props.goPrevStep()}
                 >
@@ -168,7 +169,7 @@ class Step extends Component {
                   </ButtonContent>
                 </Button>
                 <Button
-                  className="primary-btn mx-auto is-quarter"
+                  className="primary-btn mx-auto"
                   onClickHandler={() => this.props.goNextStep()}
                   disabled={!this.props.isFilled || this.props.sendingRequest}
                 >

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 2/2] 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 0fb806b..994ae30 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 dda2047..e7e4ad9 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 6e69573..f1bbf60 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'};
   `};
 `