fix: fixed size improvement

dhis2 · Oct 16, 2024 · ed68aef · ed68aef
1 parent 438beb4
commit ed68aef
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/..._modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.component.js b/..._modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.component.js
@@ -36,7 +36,7 @@ export const ChangelogComponent = ({
             <DataTable
                 fixed
                 dataTest={'changelog-data-table'}
-                width="750px"
+                layout="fixed"
             >
                 <ChangelogTableHeader
                     sortDirection={sortDirection}

diff --git a/...re/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js b/...re/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js
@@ -14,30 +14,43 @@ type Props = {
         container: string,
         previousValue: string,
         currentValue: string,
+        updatePreviousValue: string,
+        updateCurrentValue: string,
+        updateArrow: string,
     }
 }
 
 const styles = {
     container: {
-        display: 'flex',
         alignItems: 'center',
-        gap: spacers.dp4,
+        display: 'flex',
     },
     previousValue: {
         color: colors.grey700,
-        maxWidth: '50%',
     },
     currentValue: {
         color: colors.grey900,
-        maxWidth: '50%',
+    },
+    updatePreviousValue: {
+        color: colors.grey700,
+        maxWidth: '45%',
+    },
+    updateCurrentValue: {
+        color: colors.grey900,
+        maxWidth: '45%',
+    },
+    updateArrow: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        margin: `${spacers.dp4}`,
     },
 };
 
 const Updated = ({ previousValue, currentValue, classes }) => (
     <div className={classes.container}>
-        <span className={classes.previousValue}>{previousValue}</span>
-        <span><IconArrowRight16 /></span>
-        <span className={classes.currentValue}>{currentValue}</span>
+        <span className={classes.updatePreviousValue}>{previousValue}</span>
+        <span className={classes.updateArrow}><IconArrowRight16 /></span>
+        <span className={classes.updateCurrentValue}>{currentValue}</span>
     </div>
 );
 

diff --git a/...es/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableHeader.js b/...es/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableHeader.js
@@ -30,7 +30,7 @@ export const ChangelogTableHeader = ({ sortDirection, setSortDirection }: Props)
             <DataTableColumnHeader fixed top="0" width="85px">
                 {i18n.t('Change')}
             </DataTableColumnHeader>
-            <DataTableColumnHeader fixed top="0">
+            <DataTableColumnHeader fixed top="0" width="275px">
                 {i18n.t('Value')}
             </DataTableColumnHeader>
         </DataTableRow>