From a443509caa5b6724cc0fa2bbff92dca9d3817d76 Mon Sep 17 00:00:00 2001
From: Vivek Agrawal <vivekmittalagrawal@gmail.com>
Date: Thu, 17 Oct 2019 12:59:06 +0530
Subject: [PATCH] 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          | 4 +++-
 client/src/components/Donation/Donation.css            | 3 +--
 client/src/components/Flash/flash.css                  | 5 +++++
 client/src/components/layouts/global.css               | 6 ++++++
 client/src/components/profile/Profile.js               | 2 +-
 client/src/components/profile/components/camper.css    | 7 +++++++
 client/src/components/profile/components/portfolio.css | 6 +++++-
 7 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/client/src/client-only-routes/ShowSettings.js b/client/src/client-only-routes/ShowSettings.js
index f2ccff3582..75e8a74bc0 100644
--- a/client/src/client-only-routes/ShowSettings.js
+++ b/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}
diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css
index 6389c28a3d..47f2807bfd 100644
--- a/client/src/components/Donation/Donation.css
+++ b/client/src/components/Donation/Donation.css
@@ -91,8 +91,7 @@
 }
 
 .wallet {
-  overflow-wrap: break-word;
-  white-space: normal;
+  word-break: break-all;
 }
 
 .alert p {
diff --git a/client/src/components/Flash/flash.css b/client/src/components/Flash/flash.css
index 7a5123e2b6..0a2bdaaa5e 100644
--- a/client/src/components/Flash/flash.css
+++ b/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;
 }
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 76c6ce2ade..0bdafb7462 100644
--- a/client/src/components/layouts/global.css
+++ b/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 */
diff --git a/client/src/components/profile/Profile.js b/client/src/components/profile/Profile.js
index 2231edf072..bd5639152b 100644
--- a/client/src/components/profile/Profile.js
+++ b/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>
diff --git a/client/src/components/profile/components/camper.css b/client/src/components/profile/components/camper.css
index 71280fbe5c..74cda3cee4 100644
--- a/client/src/components/profile/components/camper.css
+++ b/client/src/components/profile/components/camper.css
@@ -6,3 +6,10 @@
   display: flex;
   justify-content: center;
 }
+
+.username,
+.name,
+.bio,
+.location {
+  overflow-wrap: break-word;
+}
diff --git a/client/src/components/profile/components/portfolio.css b/client/src/components/profile/components/portfolio.css
index a9f9f0385a..1a91a8bb7a 100644
--- a/client/src/components/profile/components/portfolio.css
+++ b/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;
+}