diff --git a/frontend/build/webpack.config.js b/frontend/build/webpack.config.js
index 1167916f3..11140ad16 100644
--- 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'
}
},
diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/TagInputTag.css
index dee3fba4f..7e66a4d12 100644
--- 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%;
}
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
index 2c6e8eb10..85f6992b1 100644
--- 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 (