Fixed: Overflowing release profile terms

Closes #4667
This commit is contained in:
Mark McDowall 2021-12-05 10:07:43 -08:00
parent d80565f6a9
commit b90e25f652
7 changed files with 83 additions and 9 deletions

View File

@ -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'
}
},

View File

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

View File

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

View File

@ -17,3 +17,9 @@
font-weight: 300;
font-size: 24px;
}
.label {
composes: label from '~Components/Label.css';
max-width: 100%;
}

View File

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

View File

@ -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",

View File

@ -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"