From 2d780f257c15ecc254ef1d1d394d61a2942504ca Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Tue, 11 Jun 2019 23:45:40 +0200
Subject: [PATCH] fix(client): Remove horizontal scrollbar from donation page
 (#36167)

---
 .../Donation/components/DonateOther.js        |  3 +-
 client/src/pages/donate.js                    | 48 ++++++++++---------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Donation/components/DonateOther.js b/client/src/components/Donation/components/DonateOther.js
index 2e7851f83d..db059a9d72 100644
--- a/client/src/components/Donation/components/DonateOther.js
+++ b/client/src/components/Donation/components/DonateOther.js
@@ -55,6 +55,7 @@ class DonateOther extends Component {
     return (
       <form
         action='https://www.paypal.com/cgi-bin/webscr'
+        key={item.defaultValueHash}
         method='post'
         onSubmit={() =>
           ReactGA.event({
@@ -89,7 +90,7 @@ class DonateOther extends Component {
         <Spacer />
         <Grid>
           <Row>
-            <Col md={6} mdOffset={3} sm={10} smOffset={1} xs={12}>
+            <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
               <h2 className='text-center'>
                 Other ways you can support our nonprofit
               </h2>
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
index 3256f09003..07d398dac8 100644
--- a/client/src/pages/donate.js
+++ b/client/src/pages/donate.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import Helmet from 'react-helmet';
 import { StripeProvider, Elements } from 'react-stripe-elements';
-import { Row, Col, Button } from '@freecodecamp/react-bootstrap';
+import { Grid, Row, Col, Button } from '@freecodecamp/react-bootstrap';
 
 import { stripePublicKey } from '../../config/env.json';
 
@@ -66,28 +66,32 @@ class DonatePage extends Component {
       <Fragment>
         <Helmet title='Support our nonprofit | freeCodeCamp.org' />
         <Spacer />
-        <Row>
-          <Col sm={8} smOffset={2} xs={12}>
-            <h2 className='text-center'>Become a Supporter</h2>
-            <DonateText />
-          </Col>
-          <Col sm={6} smOffset={3} xs={12}>
-            <hr />
-            <StripeProvider stripe={stripe}>
-              <Elements>
-                <DonateForm />
-              </Elements>
-            </StripeProvider>
-            <div className='text-center'>
-              <PoweredByStripe />
+        <Grid>
+          <Row>
+            <Col sm={10} smOffset={1} xs={12}>
+              <h2 className='text-center'>Become a Supporter</h2>
+              <DonateText />
+            </Col>
+            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+              <hr />
+              <StripeProvider stripe={stripe}>
+                <Elements>
+                  <DonateForm />
+                </Elements>
+              </StripeProvider>
+              <div className='text-center'>
+                <PoweredByStripe />
+                <Spacer />
+                <Button onClick={this.toggleOtherOptions}>
+                  {`${
+                    showOtherOptions ? 'Hide' : 'Show'
+                  } other ways to donate.`}
+                </Button>
+              </div>
               <Spacer />
-              <Button onClick={this.toggleOtherOptions}>
-                {`${showOtherOptions ? 'Hide' : 'Show'} other ways to donate.`}
-              </Button>
-            </div>
-            <Spacer />
-          </Col>
-        </Row>
+            </Col>
+          </Row>
+        </Grid>
         {showOtherOptions && <DonateOther />}
       </Fragment>
     );