From b045686d2b304f6b181f0b235dd7ebfaea3097c5 Mon Sep 17 00:00:00 2001
From: Paul Schreiber <paul@techmatters.org>
Date: Thu, 30 Nov 2023 18:06:56 -0500
Subject: [PATCH] fix: middle-truncate editable text field

---
 src/common/components/EditableText.js            | 13 ++++++++++++-
 src/sharedData/components/SharedDataEntryBase.js |  6 +++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/common/components/EditableText.js b/src/common/components/EditableText.js
index d11cf6eeb..f02a24ab4 100644
--- a/src/common/components/EditableText.js
+++ b/src/common/components/EditableText.js
@@ -27,6 +27,8 @@ import {
   Typography,
 } from '@mui/material';
 
+import MiddleEllipsis from 'common/components/MiddleEllipsis';
+
 const EditableText = props => {
   const { t } = useTranslation();
   const {
@@ -36,6 +38,7 @@ const EditableText = props => {
     processing,
     addMessage,
     viewProps,
+    truncateLongNames,
     onSave,
     isEditing,
     setIsEditing,
@@ -133,6 +136,14 @@ const EditableText = props => {
     );
   }
 
+  const textValue = truncateLongNames ? (
+    <MiddleEllipsis>
+      <Typography component="span">{value}</Typography>
+    </MiddleEllipsis>
+  ) : (
+    value
+  );
+
   return (
     <Typography
       component={Stack}
@@ -154,7 +165,7 @@ const EditableText = props => {
         ...(viewProps?.sx || {}),
       }}
     >
-      {value || <Link href="#">+ {addMessage}</Link>}
+      {textValue || <Link href="#">+ {addMessage}</Link>}
       {isHovering && <EditIcon sx={{ color: 'blue.dark' }} />}
     </Typography>
   );
diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js
index 998119a40..e0984fbc2 100644
--- a/src/sharedData/components/SharedDataEntryBase.js
+++ b/src/sharedData/components/SharedDataEntryBase.js
@@ -157,11 +157,15 @@ const SharedDataEntryBase = props => {
               id={`name-${dataEntry.id}`}
               label={t('sharedData.name_update')}
               value={dataEntry.name}
+              truncateLongNames={true}
               onSave={onUpdateName}
               processing={processing}
               isEditing={isEditingName}
               setIsEditing={setIsEditingName}
-              viewProps={{ color: 'black', sx: { flexGrow: 1 } }}
+              viewProps={{
+                color: 'black',
+                sx: { flexGrow: 1, overflow: 'hidden' },
+              }}
             />
           </Restricted>
         </Grid>