fix: trim long text in form controls and username block (#899)

2023-11-08 20:58:19 +02:00
parent 7e0b8f978d
commit 20c9595129
4 changed files with 33 additions and 33 deletions
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -126,7 +126,7 @@ class ProfilePage extends React.Component {

    return (
      <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold">{this.props.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>
        <DateJoined date={dateJoined} />
        {this.isYOBDisabled() && <UsernameDescription />}
        <hr className="d-none d-md-block" />
@@ -212,7 +212,7 @@ class ProfilePage extends React.Component {
              />
            </div>
          </div>
-          <div className="col pl-0">
+          <div className="col">
            <div className="d-md-none">
              {this.renderHeadingLockup()}
            </div>
--- 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>
@@ -1696,7 +1696,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]}
@@ -2487,7 +2487,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"
@@ -2496,7 +2496,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>
@@ -2574,7 +2574,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>
@@ -3053,7 +3053,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]}
@@ -3664,7 +3664,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"
@@ -3673,7 +3673,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>
@@ -3751,7 +3751,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>
@@ -5015,7 +5015,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]}
@@ -5693,7 +5693,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"
@@ -5702,7 +5702,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>
@@ -5763,7 +5763,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>
@@ -5948,7 +5948,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"
@@ -5957,7 +5957,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>
@@ -6035,7 +6035,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>
@@ -6998,7 +6998,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"
@@ -7007,7 +7007,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>
@@ -7085,7 +7085,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>
@@ -7773,7 +7773,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]}
@@ -8115,7 +8115,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"
@@ -8124,7 +8124,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>
@@ -8202,7 +8202,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>
@@ -8898,7 +8898,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]}
@@ -9240,7 +9240,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
        </div>
      </div>
      <div
-        className="col pl-0"
+        className="col"
      >
        <div
          className="d-md-none"
@@ -9249,7 +9249,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>
@@ -9282,7 +9282,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>
--- 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]}
--- 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>