fix: text overflow & portfolio hr (#37189)

* fix: text overflow & portfolio hr

* fix: code wrap

* fix: wrap locally

* fix: wrap location & resolve conflict

* fix: deprecated api

* fix: private portfolio overflows

client/src/client-only-routes/ShowSettings.js

@@ -200,7 +200,9 @@ export function ShowSettings(props) {
             </Button>
           </FullWidthRow>
           <Spacer />
-          <h1 className='text-center'>{`Account Settings for ${username}`}</h1>
+          <h1 className='text-center' style={{ overflowWrap: 'break-word' }}>
+            {`Account Settings for ${username}`}
+          </h1>
           <About
             about={about}
             currentTheme={theme}

client/src/components/Donation/Donation.css

@@ -91,8 +91,7 @@
 }
 
 .wallet {
-  overflow-wrap: break-word;
-  white-space: normal;
+  word-break: break-all;
 }
 
 .alert p {

client/src/components/Flash/flash.css

@@ -8,6 +8,11 @@
   z-index: 1000;
 }
 
+.flash-message div {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
 .flash-message-enter {
   opacity: 0;
 }

client/src/components/layouts/global.css

@@ -63,6 +63,7 @@ p {
 
 .big-heading {
   font-size: 2.5rem !important;
+  overflow-wrap: break-word;
 }
 
 .medium-heading {
@@ -257,6 +258,10 @@ input {
   border-radius: 0px;
 }
 
+textarea {
+  resize: vertical;
+}
+
 form {
   margin-bottom: 5px;
 }
@@ -405,6 +410,7 @@ blockquote .small {
 
 .alert {
   border-radius: 0px;
+  overflow-wrap: break-word;
 }
 
 /* gatsby 404 */

client/src/components/profile/Profile.js

@@ -70,7 +70,7 @@ function renderMessage(isSessionUser, username) {
   ) : (
     <Fragment>
       <FullWidthRow>
-        <h2 className='text-center'>
+        <h2 className='text-center' style={{ overflowWrap: 'break-word' }}>
           {username} has not made their portfolio public.
         </h2>
       </FullWidthRow>

client/src/components/profile/components/camper.css

@@ -6,3 +6,10 @@
   display: flex;
   justify-content: center;
 }
+
+.username,
+.name,
+.bio,
+.location {
+  overflow-wrap: break-word;
+}

client/src/components/profile/components/portfolio.css

@@ -1,8 +1,12 @@
 .portfolio-heading.media-heading {
-  border-bottom: 1px solid rgba(0, 100, 0, 0.6);
+  border-bottom: 1px solid var(--quaternary-background);
   padding-bottom: 10px;
 }
 .portfolio-screen-shot {
   width: 150px;
   min-width: 150px;
 }
+
+.media {
+  word-break: break-all;
+}