Merge pull request #15319 from allroundexperts/fix-14148

feat: added conditional styles for chat focus mode

src/components/LHNOptionsList/OptionRowLHN.js

@@ -6,6 +6,7 @@ import {
     View,
     StyleSheet,
 } from 'react-native';
+import * as optionRowStyles from '../../styles/optionRowStyles';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import Icon from '../Icon';
@@ -75,7 +76,7 @@ const OptionRowLHN = (props) => {
         ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]
         : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style);
     const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT
-        ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
+        ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles]
         : [styles.flex1];
     const sidebarInnerRowStyle = StyleSheet.flatten(props.viewMode === CONST.OPTION_MODE.COMPACT ? [
         styles.chatLinkRowPressable,

src/styles/optionRowStyles/index.js

@@ -0,0 +1,8 @@
+import styles from '../styles';
+
+const compactContentContainerStyles = styles.alignItemsBaseline;
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    compactContentContainerStyles,
+};

src/styles/optionRowStyles/index.native.js

@@ -0,0 +1,15 @@
+import styles from '../styles';
+
+/**
+ *  On native platforms, alignItemsBaseline does not work correctly
+ *  in lining the items together. As such, on native platform, we're
+ *  keeping compactContentContainerStyles as it is.
+ *  https://github.com/Expensify/App/issues/14148
+*/
+
+const compactContentContainerStyles = styles.alignItemsCenter;
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    compactContentContainerStyles,
+};