fix: ensure text utilizes space without overflow

dhis2 · Oct 23, 2024 · 5781035 · 5781035
1 parent 45b10e9
commit 5781035
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 22 deletions.
diff --git a/...re/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js b/...re/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js
@@ -14,43 +14,36 @@ type Props = {
         container: string,
         previousValue: string,
         currentValue: string,
-        updatePreviousValue: string,
-        updateCurrentValue: string,
-        updateArrow: string,
+        arrow: string,
     }
 }
 
 const styles = {
     container: {
-        alignItems: 'center',
         display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        whiteSpace: 'normal',
+        height: '100%',
     },
     previousValue: {
         color: colors.grey700,
+        wordBreak: 'break-word',
     },
     currentValue: {
         color: colors.grey900,
+        wordBreak: 'break-word',
     },
-    updatePreviousValue: {
-        color: colors.grey700,
-        maxWidth: '45%',
-    },
-    updateCurrentValue: {
-        color: colors.grey900,
-        maxWidth: '45%',
-    },
-    updateArrow: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        margin: `${spacers.dp4}`,
+    arrow: {
+        margin: `0 ${spacers.dp4}`,
     },
 };
 
 const Updated = ({ previousValue, currentValue, classes }) => (
     <div className={classes.container}>
-        <span className={classes.updatePreviousValue}>{previousValue}</span>
-        <span className={classes.updateArrow}><IconArrowRight16 /></span>
-        <span className={classes.updateCurrentValue}>{currentValue}</span>
+        <div className={classes.previousValue}>{previousValue}</div>
+        <div className={classes.arrow}><IconArrowRight16 /></div>
+        <div className={classes.currentValue}>{currentValue}</div>
     </div>
 );
 

diff --git a/...dules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js b/...dules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js
@@ -13,13 +13,11 @@ type Props = {
     },
     classes: {
         dataItemColumn: string,
-        valueColumn: string,
     },
 };
 
 const styles = {
     dataItemColumn: { wordWrap: 'break-word', hyphens: 'auto' },
-    valueColumn: { wordWrap: 'break-word' },
 };
 
 const ChangelogTableRowPlain = ({ record, classes }: Props) => (
@@ -28,7 +26,7 @@ const ChangelogTableRowPlain = ({ record, classes }: Props) => (
         <DataTableCell>{record.user}</DataTableCell>
         <DataTableCell className={classes.dataItemColumn}>{record.dataItemLabel}</DataTableCell>
         <DataTableCell><ChangelogChangeCell changeType={record.changeType} /></DataTableCell>
-        <DataTableCell className={classes.valueColumn}><ChangelogValueCell {...record} /></DataTableCell>
+        <DataTableCell><ChangelogValueCell {...record} /></DataTableCell>
     </DataTableRow>
 );