diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index a7783449a473..478b03b40f0d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -5,6 +5,8 @@ import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
import Text from '../../Text';
import variables from '../../../styles/variables';
import themeColors from '../../../styles/themes/default';
+import styles from '../../../styles/styles';
+import editedLabelStyles from '../../../styles/editedLabelStyles';
const propTypes = {
...htmlRendererPropTypes,
@@ -19,8 +21,16 @@ const EditedRenderer = (props) => {
{...defaultRendererProps}
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
+ style={[styles.alignItemsBaseline, editedLabelStyles]}
>
- {` ${props.translate('reportActionCompose.edited')}`}
+ {/* Native devices do not support margin between nested text */}
+
+ {' '}
+
+ {props.translate('reportActionCompose.edited')}
);
};
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index c2c342e332ac..26f9a6d8980b 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -356,6 +356,15 @@ class ReportActionItem extends Component {
{(hovered) => (
{this.props.shouldDisplayNewMarker && }
+
-
)}
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index edd17118ef34..e134c327df55 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -18,6 +18,7 @@ import convertToLTR from '../../../libs/convertToLTR';
import {withNetwork} from '../../../components/OnyxProvider';
import CONST from '../../../CONST';
import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough';
+import editedLabelStyles from '../../../styles/editedLabelStyles';
const propTypes = {
/** The message fragment needing to be displayed */
@@ -124,8 +125,15 @@ const ReportActionItemFragment = (props) => {
- {` ${props.translate('reportActionCompose.edited')}`}
+
+ {' '}
+
+ {props.translate('reportActionCompose.edited')}
)}
diff --git a/src/styles/editedLabelStyles/index.js b/src/styles/editedLabelStyles/index.js
new file mode 100644
index 000000000000..172dcc152b74
--- /dev/null
+++ b/src/styles/editedLabelStyles/index.js
@@ -0,0 +1,3 @@
+import display from '../utilities/display';
+
+export default {...display.dInlineFlex};
diff --git a/src/styles/editedLabelStyles/index.native.js b/src/styles/editedLabelStyles/index.native.js
new file mode 100644
index 000000000000..ff8b4c56321a
--- /dev/null
+++ b/src/styles/editedLabelStyles/index.native.js
@@ -0,0 +1 @@
+export default {};
diff --git a/src/styles/utilities/display.js b/src/styles/utilities/display.js
index 9e7e4107a937..bcef1c6b565f 100644
--- a/src/styles/utilities/display.js
+++ b/src/styles/utilities/display.js
@@ -20,6 +20,11 @@ export default {
dInline: {
display: 'inline',
},
+
+ dInlineFlex: {
+ display: 'inline-flex',
+ },
+
dBlock: {
display: 'block',
},