Fixed: Truncating long text in the middle when it shouldn't be truncated

Closes #7413

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

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import MiddleTruncate from 'react-middle-truncate';
 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';
@@ -13,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,
@@ -70,7 +70,7 @@ function ReleaseProfileRow(props: ReleaseProfileProps) {
 
           return (
             <Label key={item} className={styles.label} kind={kinds.SUCCESS}>
-              <MiddleTruncate text={item} start={10} end={10} />
+              <MiddleTruncate text={item} />
             </Label>
           );
         })}
@@ -84,7 +84,7 @@ function ReleaseProfileRow(props: ReleaseProfileProps) {
 
           return (
             <Label key={item} className={styles.label} kind={kinds.DANGER}>
-              <MiddleTruncate text={item} start={10} end={10} />
+              <MiddleTruncate text={item} />
             </Label>
           );
         })}
@@ -128,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

@@ -14,7 +14,7 @@ import createClientSideCollectionSelector from 'Store/Selectors/createClientSide
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import translate from 'Utilities/String/translate';
 import EditReleaseProfileModal from './EditReleaseProfileModal';
-import ReleaseProfileRow from './ReleaseProfileRow';
+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}