Expense-Scan and Manual Options Partially Hidden at Maximum Font Size

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -5,6 +5,7 @@
 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';
@@ -150,7 +151,7 @@
             '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}),
@@ -176,7 +177,7 @@
                 },
             }),
         }),
         [
             styles.taskTitleMenuItem,
             styles.formError,
             styles.mb0,

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -11,7 +11,7 @@
 import ConfirmModal from '@components/ConfirmModal';
 import {DelegateNoAccessContext} from '@components/DelegateNoAccessModalProvider';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {PaymentMethod} from '@components/KYCWall/types';
 import MoneyReportHeaderStatusBarSkeleton from '@components/MoneyReportHeaderStatusBarSkeleton';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -717,7 +717,7 @@
                                                                     <Text style={[styles.reportStatusText, {color: reportStatusColorStyle?.textColor}]}>{reportStatus}</Text>
                                                                 </View>
                                                             )}
-                                                            <Text style={[styles.textLabelSupporting, styles.lh16]}>{expenseCount}</Text>
+                                                            <Text style={[styles.textLabelSupporting]}>{expenseCount}</Text>
                                                         </View>
                                                     )
                                                 )}

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -375,7 +375,15 @@ function TransactionPreviewContent({
                                         />
                                         <Text
                                             numberOfLines={1}
-                                            style={[isDeleted && styles.lineThrough, styles.textMicroSupporting, styles.pre, styles.flexShrink1, {color: theme.danger}]}
+                                            style={[
+                                                isDeleted && styles.lineThrough,
+                                                styles.textMicroSupporting,
+                                                styles.lhUndefined,
+                                                styles.textMicroSupportingPadding,
+                                                styles.pre,
+                                                styles.flexShrink1,
+                                                styles.textDanger,
+                                            ]}
                                         >
                                             {RBRMessage}
                                         </Text>

src/pages/home/report/ReportActionsList.tsx

@@ -855,7 +855,7 @@ function ReportActionsList({
                 onClick={scrollToBottomAndMarkReportAsRead}
             />
             <View
-                style={[styles.flex1, !shouldShowReportRecipientLocalTime && !hideComposer ? styles.pb4 : {}]}
+                style={styles.flex1}
                 fsClass={reportActionsListFSClass}
             >
                 {shouldScrollToEndAfterLayout && topReportAction ? renderTopReportActions() : undefined}

src/styles/index.ts

@@ -357,7 +357,7 @@ const staticStyles = (theme: ThemeColors) =>
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: variables.componentBorderRadiusSmall,
-            height: 16,
+            minHeight: 16,
         },
 
         reportStatusText: {
@@ -1451,6 +1451,10 @@ const staticStyles = (theme: ThemeColors) =>
             lineHeight: '140%',
         },
 
+        lhUndefined: {
+            lineHeight: undefined,
+        },
+
         formHelp: {
             color: theme.textSupporting,
             fontSize: variables.fontSizeLabel,
@@ -4091,7 +4095,7 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         tabSelectorButton: {
-            height: variables.tabSelectorButtonHeight,
+            minHeight: variables.tabSelectorButtonHeight,
             padding: variables.tabSelectorButtonPadding,
             flexDirection: 'row',
             alignItems: 'center',
@@ -4426,6 +4430,10 @@ const staticStyles = (theme: ThemeColors) =>
             padding: 20,
         },
 
+        textMicroSupportingPadding: {
+            padding: variables.paddingSmall,
+        },
+
         mapViewContainer: {
             ...flex.flex1,
             minHeight: 300,

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,
@@ -132,6 +133,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),