From 7e431768a3e3c1ae2d4ab78e0882beb21a73ab88 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Fri, 2 Jul 2021 04:11:18 -0300
Subject: [PATCH 1/8] style changes, tooltip container in native

---
 src/components/Tooltip/index.native.js            | 9 ++++++++-
 src/pages/home/report/ReportActionItemFragment.js | 2 +-
 src/styles/styles.js                              | 3 ++-
 src/styles/utilities/flex.js                      | 4 ++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js
index c73571ff5100..713293c9ed0a 100644
--- a/src/components/Tooltip/index.native.js
+++ b/src/components/Tooltip/index.native.js
@@ -1,3 +1,5 @@
+import React from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 
 // We can't use the common component for the Tooltip as Web implementation uses DOM specific method to
@@ -11,7 +13,12 @@ const propTypes = {
  * @param {propTypes} props
  * @returns {ReactNodeLike}
  */
-const Tooltip = props => props.children;
+const Tooltip = (props) => {
+    console.log(props.containerStyle);
+    return (
+    <View style={props.containerStyle}>
+        {props.children}
+        </View>)}
 
 Tooltip.propTypes = propTypes;
 Tooltip.displayName = 'Tooltip';
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 9e5e65dfca9c..239fc1ce362f 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -83,7 +83,7 @@ class ReportActionItemFragment extends React.PureComponent {
                     );
             case 'TEXT':
                 return (
-                    <Tooltip text={tooltipText} containerStyle={styles.w100}>
+                    <Tooltip text={tooltipText} containerStyle={styles.flexShrink1}>
                         <Text
                             selectable
                             numberOfLines={this.props.isSingleLine ? 1 : undefined}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 22cf52ca528e..2a505a73d331 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -875,7 +875,7 @@ const styles = {
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'row',
-        flexWrap: 'wrap',
+        flexWrap: 'nowrap',
     },
 
     chatItemMessageHeaderSender: {
@@ -890,6 +890,7 @@ const styles = {
     },
 
     chatItemMessageHeaderTimestamp: {
+        flexShrink: 0,
         color: themeColors.textSupporting,
         fontSize: variables.fontSizeSmall,
         height: 24,
diff --git a/src/styles/utilities/flex.js b/src/styles/utilities/flex.js
index 2bcd366262c8..23e429943c56 100644
--- a/src/styles/utilities/flex.js
+++ b/src/styles/utilities/flex.js
@@ -87,4 +87,8 @@ export default {
     flexGrow4: {
         flexGrow: 4,
     },
+    
+    flexShrink1: {
+        flexShrink: 1,
+    },
 };

From 2f2f4c484ca42c7b1ec27c7df380cbe2e97e4a57 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Fri, 2 Jul 2021 11:52:12 -0300
Subject: [PATCH 2/8] lint fixes, added props to Tooltip native

---
 src/components/Tooltip/index.native.js | 24 ++++++++++++++++++------
 src/styles/utilities/flex.js           |  2 +-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js
index 713293c9ed0a..b785a3c52634 100644
--- a/src/components/Tooltip/index.native.js
+++ b/src/components/Tooltip/index.native.js
@@ -5,21 +5,33 @@ import PropTypes from 'prop-types';
 // We can't use the common component for the Tooltip as Web implementation uses DOM specific method to
 // render the View which is not present on the Mobile.
 const propTypes = {
-    children: PropTypes.element,
+    /** Styles to be assigned to the Tooltip wrapper views */
+    // eslint-disable-next-line react/forbid-prop-types
+    containerStyle: PropTypes.object,
+
+    /** Children to wrap with Tooltip. */
+    children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+    containerStyle: {},
 };
 
 /**
- * There is no native support for the Hover on the Mobile platform so we just return the enclosing childrens
+ * There is no native support for the Hover on the Mobile platform, but as we use the Tooltip as a
+ * container we must past pass that containerStyle to a simple View in order to avoid different
+ * styles across platforms.
  * @param {propTypes} props
  * @returns {ReactNodeLike}
  */
-const Tooltip = (props) => {
-    console.log(props.containerStyle);
-    return (
+const Tooltip = props => (
     <View style={props.containerStyle}>
         {props.children}
-        </View>)}
+    </View>
+);
+
 
 Tooltip.propTypes = propTypes;
+Tooltip.defaultProps = defaultProps;
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;
diff --git a/src/styles/utilities/flex.js b/src/styles/utilities/flex.js
index 23e429943c56..6caf6f1a6046 100644
--- a/src/styles/utilities/flex.js
+++ b/src/styles/utilities/flex.js
@@ -87,7 +87,7 @@ export default {
     flexGrow4: {
         flexGrow: 4,
     },
-    
+
     flexShrink1: {
         flexShrink: 1,
     },

From 301dc47b88f190944aa902f15aba74b0720be307 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Thu, 8 Jul 2021 18:41:26 -0300
Subject: [PATCH 3/8] changes to ToolTip and Hooverable props

---
 src/components/DisplayNames/index.js              | 2 +-
 src/components/Hoverable/HoverablePropTypes.js    | 4 ++--
 src/components/Hoverable/index.js                 | 2 +-
 src/components/Tooltip/TooltipPropTypes.js        | 3 ++-
 src/components/Tooltip/index.js                   | 4 ++--
 src/components/Tooltip/index.native.js            | 6 +++---
 src/pages/home/report/ReportActionItemFragment.js | 2 +-
 7 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js
index 007408324f79..7f2f5e40ff3a 100644
--- a/src/components/DisplayNames/index.js
+++ b/src/components/DisplayNames/index.js
@@ -95,7 +95,7 @@ class DisplayNames extends PureComponent {
                             <Tooltip
                                 key={index}
                                 text={tooltip}
-                                containerStyle={styles.dInline}
+                                containerStyles={[styles.dInline]}
                                 shiftHorizontal={() => this.getTooltipShiftX(index)}
                             >
                                 {/*  // We need to get the refs to all the names which will be used to correct
diff --git a/src/components/Hoverable/HoverablePropTypes.js b/src/components/Hoverable/HoverablePropTypes.js
index f6ebf25fa883..ee2f24646b4a 100644
--- a/src/components/Hoverable/HoverablePropTypes.js
+++ b/src/components/Hoverable/HoverablePropTypes.js
@@ -9,7 +9,7 @@ const propTypes = {
 
     /** Styles to be assigned to the Hoverable Container */
     // eslint-disable-next-line react/forbid-prop-types
-    containerStyle: PropTypes.object,
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Function that executes when the mouse moves over the children. */
     onHoverIn: PropTypes.func,
@@ -22,7 +22,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    containerStyle: {},
+    containerStyles: [],
     onHoverIn: () => {},
     onHoverOut: () => {},
     resetsOnClickOutside: false,
diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
index e11b63aea8c0..8326140417e0 100644
--- a/src/components/Hoverable/index.js
+++ b/src/components/Hoverable/index.js
@@ -80,7 +80,7 @@ class Hoverable extends Component {
     render() {
         return (
             <View
-                style={this.props.containerStyle}
+                style={this.props.containerStyles}
                 ref={el => this.wrapperView = el}
                 onMouseEnter={() => this.setIsHovered(true)}
                 onMouseLeave={() => this.setIsHovered(false)}
diff --git a/src/components/Tooltip/TooltipPropTypes.js b/src/components/Tooltip/TooltipPropTypes.js
index db38ecbaa75a..914cf7ba1816 100644
--- a/src/components/Tooltip/TooltipPropTypes.js
+++ b/src/components/Tooltip/TooltipPropTypes.js
@@ -6,7 +6,7 @@ const propTypes = {
     text: PropTypes.string.isRequired,
 
     /** Styles to be assigned to the Tooltip wrapper views */
-    containerStyle: PropTypes.object,
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Children to wrap with Tooltip. */
     children: PropTypes.node.isRequired,
@@ -26,6 +26,7 @@ const propTypes = {
 const defaultProps = {
     shiftHorizontal: 0,
     shiftVertical: 0,
+    containerStyles: [],
 };
 
 export {
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 59ebaf0d41ff..008cad0c4adc 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -175,13 +175,13 @@ class Tooltip extends PureComponent {
                 />
                 )}
                 <Hoverable
-                    containerStyle={this.props.containerStyle}
+                    containerStyles={this.props.containerStyles}
                     onHoverIn={this.showTooltip}
                     onHoverOut={this.hideTooltip}
                 >
                     <View
                         ref={el => this.wrapperView = el}
-                        style={this.props.containerStyle}
+                        style={this.props.containerStyles}
                     >
                         {this.props.children}
                     </View>
diff --git a/src/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js
index b785a3c52634..00d80a0f1e5e 100644
--- a/src/components/Tooltip/index.native.js
+++ b/src/components/Tooltip/index.native.js
@@ -7,14 +7,14 @@ import PropTypes from 'prop-types';
 const propTypes = {
     /** Styles to be assigned to the Tooltip wrapper views */
     // eslint-disable-next-line react/forbid-prop-types
-    containerStyle: PropTypes.object,
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Children to wrap with Tooltip. */
     children: PropTypes.node.isRequired,
 };
 
 const defaultProps = {
-    containerStyle: {},
+    containerStyles: [],
 };
 
 /**
@@ -25,7 +25,7 @@ const defaultProps = {
  * @returns {ReactNodeLike}
  */
 const Tooltip = props => (
-    <View style={props.containerStyle}>
+    <View style={[props.containerStyles]}>
         {props.children}
     </View>
 );
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 239fc1ce362f..c3ac4776663f 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -83,7 +83,7 @@ class ReportActionItemFragment extends React.PureComponent {
                     );
             case 'TEXT':
                 return (
-                    <Tooltip text={tooltipText} containerStyle={styles.flexShrink1}>
+                    <Tooltip text={tooltipText} containerStyles={[styles.flexShrink1]}>
                         <Text
                             selectable
                             numberOfLines={this.props.isSingleLine ? 1 : undefined}

From 3775a714edaf93a1074ae70471c26dbeba89f01d Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Fri, 9 Jul 2021 04:09:14 -0300
Subject: [PATCH 4/8] minor changes

---
 src/components/Tooltip/index.native.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js
index 00d80a0f1e5e..bfad392b9a35 100644
--- a/src/components/Tooltip/index.native.js
+++ b/src/components/Tooltip/index.native.js
@@ -25,12 +25,11 @@ const defaultProps = {
  * @returns {ReactNodeLike}
  */
 const Tooltip = props => (
-    <View style={[props.containerStyles]}>
+    <View style={props.containerStyles}>
         {props.children}
     </View>
 );
 
-
 Tooltip.propTypes = propTypes;
 Tooltip.defaultProps = defaultProps;
 Tooltip.displayName = 'Tooltip';

From bfa64db068bd541ae55007f415545ed2c15ca4f3 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Sat, 10 Jul 2021 22:02:58 -0300
Subject: [PATCH 5/8] removes unecessary comment

---
 src/components/Tooltip/index.native.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js
index bfad392b9a35..fb8aa3377a3e 100644
--- a/src/components/Tooltip/index.native.js
+++ b/src/components/Tooltip/index.native.js
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 // render the View which is not present on the Mobile.
 const propTypes = {
     /** Styles to be assigned to the Tooltip wrapper views */
-    // eslint-disable-next-line react/forbid-prop-types
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Children to wrap with Tooltip. */

From 076e80ceb71a88405908002bd456506fbbb61665 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Mon, 12 Jul 2021 16:08:11 -0300
Subject: [PATCH 6/8] removes comment

---
 src/components/Tooltip/index.native.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js
index fb8aa3377a3e..ea7556928c77 100644
--- a/src/components/Tooltip/index.native.js
+++ b/src/components/Tooltip/index.native.js
@@ -17,9 +17,6 @@ const defaultProps = {
 };
 
 /**
- * There is no native support for the Hover on the Mobile platform, but as we use the Tooltip as a
- * container we must past pass that containerStyle to a simple View in order to avoid different
- * styles across platforms.
  * @param {propTypes} props
  * @returns {ReactNodeLike}
  */

From 7c9b30f5244b7b06e1105a6f6e2ad2cabc93fe78 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Tue, 13 Jul 2021 09:25:44 -0300
Subject: [PATCH 7/8] changes to pressable

---
 src/pages/home/report/ReportActionItemFragment.js | 2 +-
 src/pages/home/report/ReportActionItemSingle.js   | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index c3ac4776663f..94ed4e3ae687 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -83,7 +83,7 @@ class ReportActionItemFragment extends React.PureComponent {
                     );
             case 'TEXT':
                 return (
-                    <Tooltip text={tooltipText} containerStyles={[styles.flexShrink1]}>
+                    <Tooltip text={tooltipText} >
                         <Text
                             selectable
                             numberOfLines={this.props.isSingleLine ? 1 : undefined}
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index e6587ef014ae..715b7d65074f 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, Pressable} from 'react-native';
+import {View, Pressable, TouchableWithoutFeedback} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -73,7 +73,7 @@ const ReportActionItemSingle = ({
             </Pressable>
             <View style={[styles.chatItemRight]}>
                 <View style={[styles.chatItemMessageHeader]}>
-                    <Pressable onPress={() => showUserDetails(action.actorEmail)}>
+                    <Pressable style={[styles.flexShrink1]} onPress={() => showUserDetails(action.actorEmail)}>
                         {_.map(personArray, (fragment, index) => (
                             <ReportActionItemFragment
                                 key={`person-${action.sequenceNumber}-${index}`}
@@ -85,6 +85,7 @@ const ReportActionItemSingle = ({
                             />
                         ))}
                     </Pressable>
+                    
                     <ReportActionItemDate timestamp={action.timestamp} />
                 </View>
                 {children}

From 204f835d276f0d23d7299d89a4db6d30e393e32c Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Tue, 13 Jul 2021 09:29:21 -0300
Subject: [PATCH 8/8] lint fixes

---
 src/pages/home/report/ReportActionItemFragment.js | 2 +-
 src/pages/home/report/ReportActionItemSingle.js   | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 94ed4e3ae687..0dda5b83372b 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -83,7 +83,7 @@ class ReportActionItemFragment extends React.PureComponent {
                     );
             case 'TEXT':
                 return (
-                    <Tooltip text={tooltipText} >
+                    <Tooltip text={tooltipText}>
                         <Text
                             selectable
                             numberOfLines={this.props.isSingleLine ? 1 : undefined}
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 715b7d65074f..1cf5bf99fce8 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, Pressable, TouchableWithoutFeedback} from 'react-native';
+import {View, Pressable} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -85,7 +85,6 @@ const ReportActionItemSingle = ({
                             />
                         ))}
                     </Pressable>
-                    
                     <ReportActionItemDate timestamp={action.timestamp} />
                 </View>
                 {children}