Fixed: Overflowing release profile terms

Closes #4667

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%;
 }

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>
 
           {

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%;
+}

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>
               );
             })