From 649cff6393352b89767d24ed899461b14a4ece9c Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 28 Nov 2021 15:46:06 -0800
Subject: [PATCH] Fixed: Increase width and truncate long names on Import List
 Exclusions

(cherry picked from commit 2d0541c03b761a0ec5e10711d6bd577e07141517)

Closes #2506
---
 .../ImportListExclusions/ImportListExclusion.css          | 6 ++++--
 .../ImportListExclusions/ImportListExclusions.css         | 8 ++++----
 .../ImportListExclusions/ImportListExclusions.css.d.ts    | 4 ++--
 .../ImportListExclusions/ImportListExclusions.js          | 6 ++++--
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css
index 349ebc925..7c603a8b5 100644
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css
@@ -8,11 +8,13 @@
 }
 
 .artistName {
-  flex: 0 0 300px;
+  @add-mixin truncate;
+
+  flex: 0 1 600px;
 }
 
 .foreignId {
-  flex: 0 0 400px;
+  flex: 0 0 290px;
 }
 
 .actions {
diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css
index 99e1c1e99..0e3f43824 100644
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css
@@ -4,12 +4,12 @@
   font-weight: bold;
 }
 
-.host {
-  flex: 0 0 300px;
+.name {
+  flex: 0 1 600px;
 }
 
-.path {
-  flex: 0 0 400px;
+.foreignId {
+  flex: 0 0 290px;
 }
 
 .addImportListExclusion {
diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css.d.ts b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css.d.ts
index bf7ee773c..397310d60 100644
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css.d.ts
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.css.d.ts
@@ -3,9 +3,9 @@
 interface CssExports {
   'addButton': string;
   'addImportListExclusion': string;
-  'host': string;
+  'foreignId': string;
   'importListExclusionsHeader': string;
-  'path': string;
+  'name': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.js b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.js
index fa1f5370a..12e3feabc 100644
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.js
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.js
@@ -51,8 +51,10 @@ class ImportListExclusions extends Component {
           {...otherProps}
         >
           <div className={styles.importListExclusionsHeader}>
-            <div className={styles.host}>{translate('Name')}</div>
-            <div className={styles.path}>
+            <div className={styles.name}>
+              {translate('Name')}
+            </div>
+            <div className={styles.foreignId}>
               {translate('ForeignId')}
             </div>
           </div>