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