From 1c4d57dfb399f2fba74caa73e12c13752d63bdb3 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Mon, 25 Feb 2019 22:39:05 +0300
Subject: [PATCH] fix: text bleeding buttons in profile and donate-form
 (#35399)

<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. -->

- [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md).
- [x] My pull request has a descriptive title (not a vague title like `Update index.md`)
- [x] My pull request targets the `master` branch of freeCodeCamp.
- [x] None of my changes are plagiarized from another source without proper attribution.
- [x] All the files I changed are in the same world language (for example: only English changes, or only Chinese changes, etc.)
- [x] My changes do not use shortened URLs or affiliate links.

<!--If your pull request closes a GitHub issue, replace the XXXXX below with the issue number.-->

Closes #35265
---
 client/src/components/Donation/Donation.css           | 11 +++++++----
 .../components/profile/components/Certifications.js   |  5 +++--
 .../components/profile/components/certifications.css  |  3 +++
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/profile/components/certifications.css

diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css
index 4ca8722fd8..0d7739fcd5 100644
--- a/client/src/components/Donation/Donation.css
+++ b/client/src/components/Donation/Donation.css
@@ -22,7 +22,7 @@
 .donation-form {
   display: flex;
   flex-direction: column;
-  width:80%;
+  width: 80%;
   justify-content: center;
   margin: 0 auto;
 }
@@ -58,6 +58,10 @@
   font-weight: normal;
 }
 
+.donation-form .btn {
+  white-space: normal;
+}
+
 .modal-close-btn-container {
   display: flex;
   justify-content: center;
@@ -80,7 +84,6 @@
 .StripeElement--focus {
   border-color: #66afe9;
   outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
 }
-
-
diff --git a/client/src/components/profile/components/Certifications.js b/client/src/components/profile/components/Certifications.js
index 33261facba..93c9412c65 100644
--- a/client/src/components/profile/components/Certifications.js
+++ b/client/src/components/profile/components/Certifications.js
@@ -9,6 +9,7 @@ import { Button, Row, Col } from '@freecodecamp/react-bootstrap';
 import { userByNameSelector } from '../../../redux';
 import FullWidthRow from '../../helpers/FullWidthRow';
 import { ButtonSpacer, Spacer } from '../../helpers';
+import './certifications.css';
 
 const mapStateToProps = (state, props) =>
   createSelector(
@@ -116,7 +117,7 @@ function renderCertShow(username, cert) {
   return cert.show ? (
     <Fragment key={cert.title}>
       <Row>
-        <Col sm={10} smPush={1}>
+        <Col className='certifications' sm={10} smPush={1}>
           <Link to={`/certification/${username}/${cert.showURL}`}>
             <Button
               block={true}
@@ -143,7 +144,7 @@ function Certificates({
 }) {
   const renderCertShowWithUsername = curry(renderCertShow)(username);
   return (
-    <FullWidthRow>
+    <FullWidthRow className='certifications'>
       <h2 className='text-center'>freeCodeCamp Certifications</h2>
       <br />
       {hasModernCert ? (
diff --git a/client/src/components/profile/components/certifications.css b/client/src/components/profile/components/certifications.css
new file mode 100644
index 0000000000..dec44de2a7
--- /dev/null
+++ b/client/src/components/profile/components/certifications.css
@@ -0,0 +1,3 @@
+.certifications .btn {
+  white-space: normal;
+}