From 4f61a4ab07d01fc4eaad4c479b359017b85622b2 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 8 Jan 2023 10:26:12 -0800
Subject: [PATCH] New: Fixed truncation on Firefox after renaming Custom Format
 specification

Closes #5357
---
 .../CustomFormats/CustomFormats/CustomFormat.css         | 5 +++++
 .../Settings/CustomFormats/CustomFormats/CustomFormat.js | 9 ++-------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css
index ae74adcce..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';
 
@@ -38,6 +42,7 @@
 }
 
 .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 e981ca3c2..e32a58cc1 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js
@@ -1,6 +1,5 @@
 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';
@@ -90,7 +89,7 @@ class CustomFormat extends Component {
             {name}
           </div>
 
-          <div>
+          <div className={styles.buttons}>
             <IconButton
               className={styles.cloneButton}
               title="Clone Custom Format"
@@ -128,11 +127,7 @@ class CustomFormat extends Component {
                   key={index}
                   kind={kind}
                 >
-                  <MiddleTruncate
-                    text={item.name}
-                    start={10}
-                    end={14}
-                  />
+                  {item.name}
                 </Label>
               );
             })