Merge pull request Expensify#93625 from Expensify/claude-renderHTMLLeftAlignAndInlineLinks

Reset text-align in RenderHTML baseStyle and remove dInlineFlex from comment anchors

Author: Beamanator

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

@@ -141,7 +141,6 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
                 styles.textUnderlinePositionUnder,
                 styles.textDecorationSkipInkNone,
                 isChildOfTaskTitle && styles.taskTitleMenuItem,
-                styles.dInlineFlex,
                 hoverStyle,
             ]}
             key={key}
@@ -168,7 +167,6 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
                                     textDecorationLineStyle,
                                     styles.textUnderlinePositionUnder,
                                     styles.textDecorationSkipInkNone,
-                                    styles.dInlineFlex,
                                     hoverStyle,
                                 ]}
                             >

src/components/MenuItem.tsx

@@ -1028,7 +1028,7 @@ function MenuItem({
                                                                 fsClass={forwardedFSClass}
                                                             >
                                                                 {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
-                                                                    <View style={[styles.renderHTMLTitle, shouldApplyIconPaddingToHTMLTitle && iconLeftPadding]}>
+                                                                    <View style={[styles.renderHTMLTitle, styles.textAlignLeft, shouldApplyIconPaddingToHTMLTitle && iconLeftPadding]}>
                                                                         <RenderHTML html={processedTitle} />
                                                                     </View>
                                                                 )}

src/components/ReportActionItem/TaskPreview.tsx

@@ -146,7 +146,7 @@ function TaskPreview({action, chatReportID, currentUserPersonalDetails, isHovere
                     </View>
                 </UserDetailsTooltip>
             )}
-            <View style={[styles.alignSelfCenter, styles.flex1]}>
+            <View style={[styles.alignSelfCenter, styles.flex1, styles.textAlignLeft]}>
                 <RenderHTML html={getTaskHTML()} />
             </View>
         </>

src/components/ReportActionItem/TaskView.tsx

@@ -173,7 +173,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                                     {({pressed}) => {
                                         const titleContent = (
                                             <>
-                                                <View style={[styles.flexRow, styles.flex1]}>
+                                                <View style={[styles.flexRow, styles.flex1, styles.textAlignLeft]}>
                                                     <RenderHTML html={taskTitle} />
                                                 </View>
                                                 {!isDisableInteractive && (

src/pages/inbox/report/ReportActionItem.tsx

@@ -558,10 +558,15 @@ function ReportActionItem({
                                             />
                                         )}
                                         <View
-                                            style={StyleUtils.getReportActionItemStyle(
-                                                hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || hasDraft || isPaymentMethodPopoverActive,
-                                                !hasDraft && !!onPress,
-                                            )}
+                                            style={[
+                                                StyleUtils.getReportActionItemStyle(
+                                                    hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || hasDraft || isPaymentMethodPopoverActive,
+                                                    !hasDraft && !!onPress,
+                                                ),
+                                                // The Pressable above renders as a role=button, whose UA text-align:center is inherited by
+                                                // bare inline content (e.g. an auto-linked URL with no wrapping Text). Reset it to left here.
+                                                styles.textAlignLeft,
+                                            ]}
                                         >
                                             <OfflineWithFeedback
                                                 onClose={onClose}

src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

@@ -168,7 +168,7 @@ function ToggleSettingOptionRow({
         if (typeof subtitle === 'string') {
             if (!!subtitle && shouldParseSubtitle) {
                 return (
-                    <View style={[styles.flexRow, styles.renderHTML, subtitleSpacingStyle]}>
+                    <View style={[styles.flexRow, styles.renderHTML, styles.textAlignLeft, subtitleSpacingStyle]}>
                         <RenderHTML html={processedSubtitle} />
                     </View>
                 );
@@ -195,6 +195,7 @@ function ToggleSettingOptionRow({
         styles.mutedNormalTextLabel,
         styles.flexRow,
         styles.renderHTML,
+        styles.textAlignLeft,
         subtitleSpacingStyle,
         subtitleStyle,
         processedSubtitle,