Fixed: Overflowing release profile terms

Closes #4667
2021-12-05 10:07:43 -08:00 · 2021-12-05 10:07:43 -08:00 · b90e25f652
parent d80565f6a9
commit b90e25f652
7 changed files with 83 additions and 9 deletions
--- a/frontend/build/webpack.config.js
+++ b/frontend/build/webpack.config.js
@ -44,7 +44,8 @@ module.exports = (env) => {
        'node_modules'
      ],
      alias: {
-        jquery: 'jquery/src/jquery'
+        jquery: 'jquery/src/jquery',
+        'react-middle-truncate': 'react-middle-truncate/lib/react-middle-truncate'
      }
    },

--- a/frontend/src/Components/Form/TagInputTag.css
+++ b/frontend/src/Components/Form/TagInputTag.css
@ -2,9 +2,18 @@
  display: flex;
  justify-content: center;
  flex-direction: column;
+  max-width: 100%;
  height: 31px;
 }

+.link {
+  max-width: 100%;
+}
+
+.linkWithEdit {
+  max-width: calc(100% - 9px - 4px - 2px);
+}
+
 .editContainer {
  display: inline-block;
  margin-left: 4px;
@ -15,5 +24,11 @@
 .editButton {
  composes: button from '~Components/Link/IconButton.css';

-  width: auto;
+  width: 9px;
+}
+
+.label {
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
 }
--- a/frontend/src/Components/Form/TagInputTag.js
+++ b/frontend/src/Components/Form/TagInputTag.js
@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import MiddleTruncate from 'react-middle-truncate';
 import { icons, kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
@ -48,20 +49,26 @@ class TagInputTag extends Component {
      kind,
      canEdit
    } = this.props;
+
    return (
      <div
        className={styles.tag}
        tabIndex={-1}
      >
        <Label
+          className={styles.label}
          kind={kind}
        >
          <Link
+            className={canEdit ? styles.linkWithEdit : styles.link}
            tabIndex={-1}
            onPress={this.onDelete}
          >
-
-            {tag.name}
+            <MiddleTruncate
+              text={tag.name}
+              start={10}
+              end={10}
+            />
          </Link>

          {
--- a/frontend/src/Settings/Profiles/Release/ReleaseProfile.css
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfile.css
@ -17,3 +17,9 @@
  font-weight: 300;
  font-size: 24px;
 }
+
+.label {
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
+}
--- a/frontend/src/Settings/Profiles/Release/ReleaseProfile.js
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfile.js
@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import MiddleTruncate from 'react-middle-truncate';
 import { kinds } from 'Helpers/Props';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
@ -96,10 +97,15 @@ class ReleaseProfile extends Component {

              return (
                <Label
+                  className={styles.label}
                  key={item}
                  kind={kinds.SUCCESS}
                >
-                  {item}
+                  <MiddleTruncate
+                    text={item}
+                    start={10}
+                    end={10}
+                  />
                </Label>
              );
            })
@ -113,10 +119,15 @@ class ReleaseProfile extends Component {

              return (
                <Label
+                  className={styles.label}
                  key={item.key}
                  kind={isPreferred ? kinds.DEFAULT : kinds.WARNING}
                >
-                  {item.key} {isPreferred && '+'}{item.value}
+                  <MiddleTruncate
+                    text={`${item.key} ${isPreferred ? '+' : ''}${item.value}`}
+                    start={10}
+                    end={14}
+                  />
                </Label>
              );
            })
@ -132,10 +143,15 @@ class ReleaseProfile extends Component {

              return (
                <Label
+                  className={styles.label}
                  key={item}
                  kind={kinds.DANGER}
                >
-                  {item}
+                  <MiddleTruncate
+                    text={item}
+                    start={10}
+                    end={10}
+                  />
                </Label>
              );
            })
--- a/package.json
+++ b/package.json
@ -63,6 +63,7 @@
    "react-google-recaptcha": "2.1.0",
    "react-lazyload": "3.2.0",
    "react-measure": "1.4.7",
+    "react-middle-truncate": "1.0.3",
    "react-popper": "1.3.3",
    "react-redux": "7.2.4",
    "react-router": "5.2.0",
--- a/yarn.lock
+++ b/yarn.lock
@ -2108,7 +2108,7 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

-classnames@2.3.1:
+classnames@2.3.1, classnames@^2.2.6:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@ -4052,6 +4052,11 @@ isexe@^2.0.0:
  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=

+isnumeric@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/isnumeric/-/isnumeric-0.2.0.tgz#a2347ba360de19e33d0ffd590fddf7755cbf2e64"
+  integrity sha1-ojR7o2DeGeM9D/1ZD933dVy/LmQ=
+
 isobject@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@ -4781,7 +4786,7 @@ normalize-selector@^0.2.0:
  resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
  integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=

-normalize.css@8.0.1:
+normalize.css@8.0.1, normalize.css@^8.0.0:
  version "8.0.1"
  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
@ -5622,6 +5627,16 @@ react-measure@1.4.7:
    prop-types "^15.5.4"
    resize-observer-polyfill "^1.4.1"

+react-middle-truncate@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-middle-truncate/-/react-middle-truncate-1.0.3.tgz#42d198ad9738bc2d8f7b8e77e11e02107b856fe1"
+  integrity sha512-rBYJjSYgAvNayDk+yZz8QhQqbGLjsSZV2CuGJ4g18o6BUGlMgZ4fIOGKuIEIZj17zCXzSw7mCGAcZ4lw0y8Lgw==
+  dependencies:
+    classnames "^2.2.6"
+    lodash "^4.17.15"
+    normalize.css "^8.0.0"
+    units-css "^0.4.0"
+
 react-popper@1.3.3:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
@ -6974,6 +6989,14 @@ unist-util-stringify-position@^2.0.0:
  dependencies:
    "@types/unist" "^2.0.2"

+units-css@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07"
+  integrity sha1-1iKGU6UZg9fBb/KPi53Dsf/tOgc=
+  dependencies:
+    isnumeric "^0.2.0"
+    viewport-dimensions "^0.2.0"
+
 universalify@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
@ -7089,6 +7112,11 @@ vfile@^4.0.0:
    unist-util-stringify-position "^2.0.0"
    vfile-message "^2.0.0"

+viewport-dimensions@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/viewport-dimensions/-/viewport-dimensions-0.2.0.tgz#de740747db5387fd1725f5175e91bac76afdf36c"
+  integrity sha1-3nQHR9tTh/0XJfUXXpG6x2r982w=
+
 walker@~1.0.5:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"