Fixed: Truncate long text in tag values

(cherry picked from commit 93c3f6d1d6b50a7ae06aca083aba5297d8d8b6e8)

frontend/src/Settings/Profiles/Release/ReleaseProfileItem.tsx

@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
 import { Tag } from 'App/State/TagsAppState';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
+import MiddleTruncate from 'Components/MiddleTruncate';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TagList from 'Components/TagList';
 import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
@@ -12,14 +13,14 @@ import Indexer from 'typings/Indexer';
 import ReleaseProfile from 'typings/Settings/ReleaseProfile';
 import translate from 'Utilities/String/translate';
 import EditReleaseProfileModal from './EditReleaseProfileModal';
-import styles from './ReleaseProfileRow.css';
+import styles from './ReleaseProfileItem.css';
 
 interface ReleaseProfileProps extends ReleaseProfile {
   tagList: Tag[];
   indexerList: Indexer[];
 }
 
-function ReleaseProfileRow(props: ReleaseProfileProps) {
+function ReleaseProfileItem(props: ReleaseProfileProps) {
   const {
     id,
     name,
@@ -69,7 +70,7 @@ function ReleaseProfileRow(props: ReleaseProfileProps) {
 
           return (
             <Label key={item} className={styles.label} kind={kinds.SUCCESS}>
-              {item}
+              <MiddleTruncate text={item} />
             </Label>
           );
         })}
@@ -83,7 +84,7 @@ function ReleaseProfileRow(props: ReleaseProfileProps) {
 
           return (
             <Label key={item} className={styles.label} kind={kinds.DANGER}>
-              {item}
+              <MiddleTruncate text={item} />
             </Label>
           );
         })}
@@ -127,4 +128,4 @@ function ReleaseProfileRow(props: ReleaseProfileProps) {
   );
 }
 
-export default ReleaseProfileRow;
+export default ReleaseProfileItem;

frontend/src/Settings/Profiles/Release/ReleaseProfiles.css

@@ -4,7 +4,7 @@
 }
 
 .addReleaseProfile {
-  composes: releaseProfile from '~./ReleaseProfileRow.css';
+  composes: releaseProfile from '~./ReleaseProfileItem.css';
 
   background-color: var(--cardAlternateBackgroundColor);
   color: var(--gray);

frontend/src/Settings/Profiles/Release/ReleaseProfiles.tsx

@@ -8,13 +8,13 @@ import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
 import { icons } from 'Helpers/Props';
-import ReleaseProfileRow from 'Settings/Profiles/Release/ReleaseProfileRow';
 import { fetchIndexers } from 'Store/Actions/Settings/indexers';
 import { fetchReleaseProfiles } from 'Store/Actions/Settings/releaseProfiles';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import translate from 'Utilities/String/translate';
 import EditReleaseProfileModal from './EditReleaseProfileModal';
+import ReleaseProfileItem from './ReleaseProfileItem';
 import styles from './ReleaseProfiles.css';
 
 function ReleaseProfiles() {
@@ -59,7 +59,7 @@ function ReleaseProfiles() {
 
           {items.map((item) => {
             return (
-              <ReleaseProfileRow
+              <ReleaseProfileItem
                 key={item.id}
                 tagList={tagList}
                 indexerList={indexerList}