fix: Add a mid ellipsis to the filename in the qualification list

This allows to see the start and the end of the filename without any overflow.
cozy · Sep 5, 2022 · 4f30229 · 4f30229
1 parent 57b95fb
commit 4f30229
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/react/Viewer/Panel/Qualification.jsx b/react/Viewer/Panel/Qualification.jsx
@@ -7,6 +7,7 @@ import List from '../../MuiCozyTheme/List'
 import ListItem from '../../MuiCozyTheme/ListItem'
 import QualificationListItemText from './QualificationListItemText'
 import { withViewerLocales } from '../withViewerLocales'
+import MidEllipsis from '../../MidEllipsis'
 
 const {
   document: {
@@ -53,9 +54,13 @@ const Qualification = ({ file = {}, contactsFullname, t, f, lang }) => {
         <QualificationListItemText
           primary={t('Viewer.panel.qualification.label.title')}
           secondary={
-            pageLabel
-              ? t(`Viewer.panel.qualification.label.${pageLabel}`)
-              : filename
+            <MidEllipsis
+              text={
+                pageLabel
+                  ? t(`Viewer.panel.qualification.label.${pageLabel}`)
+                  : filename
+              }
+            />
           }
         />
       </ListItem>