diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
index 565ad219da70..aa60fb13148f 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -5,6 +5,7 @@ import type {TNode} from 'react-native-render-html';
import useThemeStyles from '@hooks/useThemeStyles';
import convertToLTR from '@libs/convertToLTR';
import FontUtils from '@styles/utils/FontUtils';
+import variables from '@styles/variables';
import type ChildrenProps from '@src/types/utils/ChildrenProps';
import {computeEmbeddedMaxWidth, isChildOfTaskTitle} from './htmlEngineUtils';
import htmlRenderers from './HTMLRenderers';
@@ -151,7 +152,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
'account-manager-link': HTMLElementModel.fromCustomModel({tagName: 'account-manager-link', contentModel: HTMLContentModel.textual}),
'next-step': HTMLElementModel.fromCustomModel({
tagName: 'next-step',
- mixedUAStyles: {...styles.textLabelSupporting, ...styles.lh16},
+ mixedUAStyles: {...styles.textLabelSupporting, paddingVertical: variables.labelPaddingVertical},
contentModel: HTMLContentModel.textual,
}),
'next-step-email': HTMLElementModel.fromCustomModel({tagName: 'next-step-email', contentModel: HTMLContentModel.textual}),
@@ -194,6 +195,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
styles.taskTitleMenuItemItalic,
styles.em,
styles.h1,
+ styles.lh16,
styles.blockquote,
styles.onlyEmojisTextLineHeight,
styles.subTextFileUpload,
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index fec0de283a76..2510dbcd0ade 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -712,7 +712,7 @@ function MoneyRequestReportPreviewContent({
{reportStatus}
)}
- {!shouldShowAccessPlaceHolder && {expenseCount}}
+ {!shouldShowAccessPlaceHolder && {expenseCount}}
)
)}
diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
index c0f644e0bfae..80d444241d60 100644
--- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
+++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
@@ -378,7 +378,15 @@ function TransactionPreviewContent({
/>
{RBRMessage}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 815536b71f8e..8c9d3b40fd65 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -361,7 +361,7 @@ const staticStyles = (theme: ThemeColors) =>
alignItems: 'center',
justifyContent: 'center',
borderRadius: variables.componentBorderRadiusSmall,
- height: 16,
+ minHeight: 16,
},
reportStatusText: {
@@ -1452,6 +1452,10 @@ const staticStyles = (theme: ThemeColors) =>
color: theme.textSupporting,
},
+ lhUndefined: {
+ lineHeight: undefined,
+ },
+
lh14: {
lineHeight: variables.lineHeightSmall,
},
@@ -4111,8 +4115,12 @@ const staticStyles = (theme: ThemeColors) =>
height: 450,
},
+ textMicroSupportingPadding: {
+ padding: variables.paddingSmall,
+ },
+
tabSelectorButton: {
- height: variables.tabSelectorButtonHeight,
+ minHeight: variables.tabSelectorButtonHeight,
padding: variables.tabSelectorButtonPadding,
flexDirection: 'row',
alignItems: 'center',
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 85f2f8706ed2..070a7943ea15 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -52,6 +52,7 @@ export default {
defaultAvatarPreviewSize: 360,
fabBottom: 25,
breadcrumbsFontSize: getValueUsingPixelRatio(19, 32),
+ labelPaddingVertical: Math.abs((getValueUsingPixelRatio(13, 19) - 16) / 2),
fontSizeXXSmall: 7,
fontSizeSmall: getValueUsingPixelRatio(11, 17),
fontSizeExtraSmall: 9,
@@ -134,6 +135,7 @@ export default {
inputHeightSmall: 28,
inputIconMarginTopSmall: getValueUsingPixelRatio(8, 11),
inputIconMarginTopLarge: getValueUsingPixelRatio(16, 21),
+ paddingSmall: getValueUsingPixelRatio(7, 8),
formErrorLineHeight: getValueUsingPixelRatio(18, 23),
communicationsLinkHeight: getValueUsingPixelRatio(20, 30),
alternateTextHeight: getValueUsingPixelRatio(20, 24),