From d1080b825c897a2eca98a526acd458065ce8af50 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sun, 8 Jan 2023 21:00:43 -0600
Subject: [PATCH] Fixed: Truncate custom format card tags

Fixes #7725
Fixes #7973

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 .../CustomFormats/CustomFormats/CustomFormat.css      | 11 +++++++++++
 .../CustomFormats/CustomFormats/CustomFormat.js       |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css
index ed030aa80..0ec29c546 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css
@@ -17,6 +17,10 @@
   font-size: 24px;
 }
 
+.buttons {
+  flex: 0 0 auto;
+}
+
 .cloneButton {
   composes: button from '~Components/Link/IconButton.css';
 
@@ -36,3 +40,10 @@
   margin: 0;
   border: none;
 }
+
+.label {
+  @add-mixin truncate;
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
+}
diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
index 65ef3069a..512805a8a 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
@@ -90,7 +90,7 @@ class CustomFormat extends Component {
             {name}
           </div>
 
-          <div>
+          <div className={styles.buttons}>
             <IconButton
               className={styles.cloneButton}
               title={translate('CloneCustomFormat')}
@@ -124,6 +124,7 @@ class CustomFormat extends Component {
 
               return (
                 <Label
+                  className={styles.label}
                   key={index}
                   kind={kind}
                 >