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 (