diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js index 246c7c2651..4d6bd41b3e 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js +++ b/src/core_modules/capture-core/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 }) => (
- {previousValue} - - {currentValue} +
{previousValue}
+
+
{currentValue}
); diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js index e93571cbf2..3169194fc1 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js +++ b/src/core_modules/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) => ( {record.user} {record.dataItemLabel} - + );