From 1a4174d2f254d5d6705e8ddde656f2d76cebfdc0 Mon Sep 17 00:00:00 2001
From: Ihor Romaniuk <notsuchasall25@gmail.com>
Date: Wed, 8 Nov 2023 20:57:45 +0200
Subject: [PATCH] fix: trim long text in form controls and username block
 (#887)

* fix: trim long text in form controls and username block
* fix: update snapshots
---
 src/profile/ProfilePage.jsx                   |  4 +-
 .../__snapshots__/ProfilePage.test.jsx.snap   | 58 +++++++++----------
 .../__snapshots__/SocialLinks.test.jsx.snap   |  2 +-
 src/profile/forms/elements/Visibility.jsx     |  2 +-
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/profile/ProfilePage.jsx b/src/profile/ProfilePage.jsx
index 306be36ed..839d09041 100644
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -124,7 +124,7 @@ class ProfilePage extends React.Component {
 
     return (
       <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.match.params.username}</h1>
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -222,7 +222,7 @@ class ProfilePage extends React.Component {
               />
             </div>
           </div>
-          <div className="col pl-0">
+          <div className="col">
             <div className="d-md-none">
               {this.renderHeadingLockup()}
             </div>
diff --git a/src/profile/__snapshots__/ProfilePage.test.jsx.snap b/src/profile/__snapshots__/ProfilePage.test.jsx.snap
index 5a00179e4..c37aafaf1 100644
--- a/src/profile/__snapshots__/ProfilePage.test.jsx.snap
+++ b/src/profile/__snapshots__/ProfilePage.test.jsx.snap
@@ -104,7 +104,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -113,7 +113,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -191,7 +191,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -1694,7 +1694,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                         </svg>
                       </span>
                       <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                         id="visibilityCountry"
                         name="visibilityCountry"
                         onChange={[Function]}
@@ -2485,7 +2485,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -2494,7 +2494,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -2572,7 +2572,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -3049,7 +3049,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                         </svg>
                       </span>
                       <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                         id="visibilityLevelOfEducation"
                         name="visibilityLevelOfEducation"
                         onChange={[Function]}
@@ -3660,7 +3660,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -3669,7 +3669,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -3747,7 +3747,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -5009,7 +5009,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                         </svg>
                       </span>
                       <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                         id="visibilityLanguageProficiencies"
                         name="visibilityLanguageProficiencies"
                         onChange={[Function]}
@@ -5687,7 +5687,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -5696,7 +5696,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               verified
             </h1>
@@ -5757,7 +5757,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               verified
             </h1>
@@ -6047,7 +6047,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -6056,7 +6056,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -6134,7 +6134,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -7097,7 +7097,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -7106,7 +7106,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -7184,7 +7184,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -7872,7 +7872,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                         </svg>
                       </span>
                       <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                         id="visibilityBio"
                         name="visibilityBio"
                         onChange={[Function]}
@@ -8214,7 +8214,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -8223,7 +8223,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -8301,7 +8301,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -8995,7 +8995,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                         </svg>
                       </span>
                       <select
-                        className="d-inline-block w-auto form-control"
+                        className="d-inline-block form-control"
                         id="visibilityBio"
                         name="visibilityBio"
                         onChange={[Function]}
@@ -9337,7 +9337,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
         </div>
       </div>
       <div
-        className="col pl-0"
+        className="col"
       >
         <div
           className="d-md-none"
@@ -9346,7 +9346,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
@@ -9379,7 +9379,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
             data-hj-suppress={true}
           >
             <h1
-              className="h2 mb-0 font-weight-bold"
+              className="h2 mb-0 font-weight-bold text-truncate"
             >
               staff
             </h1>
diff --git a/src/profile/forms/__snapshots__/SocialLinks.test.jsx.snap b/src/profile/forms/__snapshots__/SocialLinks.test.jsx.snap
index 15bf86d8d..b9c7ce935 100644
--- a/src/profile/forms/__snapshots__/SocialLinks.test.jsx.snap
+++ b/src/profile/forms/__snapshots__/SocialLinks.test.jsx.snap
@@ -119,7 +119,7 @@ exports[`<SocialLinks /> calls social links with edit mode bio 1`] = `
                 </svg>
               </span>
               <select
-                className="d-inline-block w-auto form-control"
+                className="d-inline-block form-control"
                 id="visibilitySocialLinks"
                 name="visibilitySocialLinks"
                 onChange={[Function]}
diff --git a/src/profile/forms/elements/Visibility.jsx b/src/profile/forms/elements/Visibility.jsx
index 2509c1c86..cd5968016 100644
--- a/src/profile/forms/elements/Visibility.jsx
+++ b/src/profile/forms/elements/Visibility.jsx
@@ -39,7 +39,7 @@ const VisibilitySelect = ({ intl, className, ...props }) => {
       <span className="d-inline-block ml-1 mr-2" style={{ width: '1.5rem' }}>
         <FontAwesomeIcon icon={icon} />
       </span>
-      <select className="d-inline-block w-auto form-control" {...props}>
+      <select className="d-inline-block form-control" {...props}>
         <option key="private" value="private">
           {intl.formatMessage(messages['profile.visibility.who.just.me'])}
         </option>