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

@@ -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);
 }
-
-

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 ? (

client/src/components/profile/components/certifications.css

@@ -0,0 +1,3 @@
+.certifications .btn {
+  white-space: normal;
+}