fix: aligne data elements in profile

dhis2 · Mar 1, 2024 · 54fb586 · 54fb586
1 parent 6e9826f
commit 54fb586
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/core_modules/capture-ui/FlatList/FlatList.component.js b/src/core_modules/capture-ui/FlatList/FlatList.component.js
@@ -5,7 +5,6 @@ import { colors, spacersNum } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 import type { Props } from './flatList.types';
 
-
 const styles = {
     itemRow: {
         borderBottom: `1px solid${colors.grey300}`,
@@ -16,11 +15,15 @@ const styles = {
         '&.isLastItem': {
             borderBottomWidth: 0,
         },
+        gap: '5px',
     },
     itemKey: {
-        width: 128,
+        flex: '50%',
         color: colors.grey600,
     },
+    itemValue: {
+        flex: '50%',
+    },
 };
 
 const FlatListPlain = ({ list, classes, dataTest }: Props) => {
@@ -31,18 +34,15 @@ const FlatListPlain = ({ list, classes, dataTest }: Props) => {
             className={cx(classes.itemRow, { isLastItem: item.reactKey === lastItemKey })}
         >
             <div className={classes.itemKey}>{item.key}</div>
-            <div>{item.value}</div>
+            <div className={classes.itemValue}>{item.value}</div> {/* Added className */}
         </div>
     );
 
     return (
-        <div
-            data-test={dataTest}
-        >
+        <div data-test={dataTest}>
             {list.map(item => renderItem(item))}
         </div>
     );
 };
 
-
 export const FlatList: ComponentType<$Diff<Props, CssClasses>> = withStyles(styles)(FlatListPlain);