From 676dcbae0e0cac5dab978d22b355de9fea7db658 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Fri, 4 Nov 2022 11:27:39 -0500
Subject: [PATCH] Fixed: Truncate custom format card tags

(cherry picked from commit fe476a319e1768a929e326e87a54b10bc5e4f402)
---
 .../Settings/CustomFormats/CustomFormats/CustomFormat.css | 6 ++++++
 .../Settings/CustomFormats/CustomFormats/CustomFormat.js  | 8 +++++++-
 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 ed030aa808..ae74adccee 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css
@@ -36,3 +36,9 @@
   margin: 0;
   border: none;
 }
+
+.label {
+  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 65ef3069aa..97dd3c99aa 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import MiddleTruncate from 'react-middle-truncate';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
@@ -124,10 +125,15 @@ class CustomFormat extends Component {
 
               return (
                 <Label
+                  className={styles.label}
                   key={index}
                   kind={kind}
                 >
-                  {item.name}
+                  <MiddleTruncate
+                    text={item.name}
+                    start={10}
+                    end={14}
+                  />
                 </Label>
               );
             })