fix: misaligned data elements

dhis2 · Apr 19, 2024 · 62d6179 · 62d6179
1 parent 1deefb0
commit 62d6179
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/src/core_modules/capture-ui/FlatList/FlatList.component.js b/src/core_modules/capture-ui/FlatList/FlatList.component.js
@@ -5,24 +5,34 @@ import { colors, spacersNum } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 import type { Props } from './flatList.types';
 
+const itemStyles = {
+    overflow: 'hidden',
+    wordWrap: 'break-word',
+    textOverflow: 'ellipsis',
+    hyphens: 'auto',
+};
+
 const styles = {
     itemRow: {
-        borderBottom: `1px solid${colors.grey300}`,
+        borderBottom: `1px solid ${colors.grey300}`,
         display: 'flex',
         fontSize: '14px',
         lineHeight: '19px',
         padding: `${spacersNum.dp12}px 0`,
         '&.isLastItem': {
             borderBottomWidth: 0,
         },
-        gap: '5px',
     },
     itemKey: {
-        flex: '50%',
+        flex: '0 0 auto',
+        width: '128px',
         color: colors.grey600,
+        marginRight: '20px',
+        ...itemStyles,
     },
     itemValue: {
-        flex: '50%',
+        flex: 1,
+        ...itemStyles,
     },
 };
 
@@ -33,7 +43,7 @@ const FlatListPlain = ({ list, classes, dataTest }: Props) => {
             key={item.reactKey}
             className={cx(classes.itemRow, { isLastItem: item.reactKey === lastItemKey })}
         >
-            <div className={classes.itemKey}>{item.key}</div>
+            <div className={classes.itemKey}>{item.key}:</div>
             <div className={classes.itemValue}>{item.value}</div>
         </div>
     );