From 001e69df07a32f790a02cf2b40e37657da69e10c Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 22 Sep 2022 11:48:50 -0700
Subject: [PATCH 1/2] fix styles for small screen widths

---
 src/pages/home/report/ReportActionCompose.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 1616b296952e..b6f16f969a64 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -674,7 +674,7 @@ class ReportActionCompose extends React.Component {
                         </Tooltip>
                     </View>
                 </View>
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, !this.props.isSmallScreenWidth && styles.chatItemComposeSecondaryRow]}>
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, (!this.props.isSmallScreenWidth || (this.props.isSmallScreenWidth && !this.props.network.isOffline)) && styles.chatItemComposeSecondaryRow]}>
                     {!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />

From 2da80967a054a7484a4ccfa58bd1f0a6833d4798 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 22 Sep 2022 11:49:35 -0700
Subject: [PATCH 2/2] spacing

---
 src/pages/home/report/ReportActionCompose.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index b6f16f969a64..8ec31caf6fc5 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -674,7 +674,12 @@ class ReportActionCompose extends React.Component {
                         </Tooltip>
                     </View>
                 </View>
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, (!this.props.isSmallScreenWidth || (this.props.isSmallScreenWidth && !this.props.network.isOffline)) && styles.chatItemComposeSecondaryRow]}>
+                <View style={[
+                    styles.flexRow,
+                    styles.justifyContentBetween,
+                    styles.alignItemsCenter,
+                    (!this.props.isSmallScreenWidth || (this.props.isSmallScreenWidth && !this.props.network.isOffline)) && styles.chatItemComposeSecondaryRow]}
+                >
                     {!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />