From cbd7dc5c5564d263194accba142b7450e2045643 Mon Sep 17 00:00:00 2001 From: Patrick Date: Tue, 28 Feb 2023 20:29:57 -0700 Subject: [PATCH 1/3] Modify emojiHeaderContainer style with a -1 top, only on non-native devices --- src/styles/emojiHeaderContainerPlatformStyles/index.js | 1 + src/styles/emojiHeaderContainerPlatformStyles/index.native.js | 1 + src/styles/styles.js | 2 ++ 3 files changed, 4 insertions(+) create mode 100644 src/styles/emojiHeaderContainerPlatformStyles/index.js create mode 100644 src/styles/emojiHeaderContainerPlatformStyles/index.native.js diff --git a/src/styles/emojiHeaderContainerPlatformStyles/index.js b/src/styles/emojiHeaderContainerPlatformStyles/index.js new file mode 100644 index 000000000000..f81ad6ecd883 --- /dev/null +++ b/src/styles/emojiHeaderContainerPlatformStyles/index.js @@ -0,0 +1 @@ +export default {top: -1}; diff --git a/src/styles/emojiHeaderContainerPlatformStyles/index.native.js b/src/styles/emojiHeaderContainerPlatformStyles/index.native.js new file mode 100644 index 000000000000..ff8b4c56321a --- /dev/null +++ b/src/styles/emojiHeaderContainerPlatformStyles/index.native.js @@ -0,0 +1 @@ +export default {}; diff --git a/src/styles/styles.js b/src/styles/styles.js index d52e00cf9d90..8b84e4a40c95 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -19,6 +19,7 @@ import pointerEventsNone from './pointerEventsNone'; import pointerEventsAuto from './pointerEventsAuto'; import overflowXHidden from './overflowXHidden'; import CONST from '../CONST'; +import emojiHeaderContainerPlatformStyles from './emojiHeaderContainerPlatformStyles'; const picker = { backgroundColor: themeColors.transparent, @@ -1488,6 +1489,7 @@ const styles = { height: CONST.EMOJI_PICKER_HEADER_HEIGHT, justifyContent: 'center', width: '100%', + ...emojiHeaderContainerPlatformStyles, }, emojiSkinToneTitle: { From f59daa3d9e6412e1f6e6630909872ae58ea3b54d Mon Sep 17 00:00:00 2001 From: Patrick Date: Tue, 28 Feb 2023 20:45:49 -0700 Subject: [PATCH 2/3] Adding a clear comment of why we are making this change to the emojiHeaderContainerPlatformStyles --- src/styles/emojiHeaderContainerPlatformStyles/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/emojiHeaderContainerPlatformStyles/index.js b/src/styles/emojiHeaderContainerPlatformStyles/index.js index f81ad6ecd883..c7eb2783bda5 100644 --- a/src/styles/emojiHeaderContainerPlatformStyles/index.js +++ b/src/styles/emojiHeaderContainerPlatformStyles/index.js @@ -1 +1,4 @@ +// This change is only temporary until browser have fixed the issue with position: sticky causing the header to bounce on scroll in non-native apps +// https://github.com/Expensify/App/issues/15282 +// https://bugs.chromium.org/p/chromium/issues/detail?id=734461 export default {top: -1}; From 1391e60c49e478886b28ab44e547a29458422e04 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 1 Mar 2023 10:23:37 -0700 Subject: [PATCH 3/3] Expanding for readability, and updating import order --- src/styles/emojiHeaderContainerPlatformStyles/index.js | 4 +++- src/styles/styles.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/emojiHeaderContainerPlatformStyles/index.js b/src/styles/emojiHeaderContainerPlatformStyles/index.js index c7eb2783bda5..6bc0c37459ce 100644 --- a/src/styles/emojiHeaderContainerPlatformStyles/index.js +++ b/src/styles/emojiHeaderContainerPlatformStyles/index.js @@ -1,4 +1,6 @@ // This change is only temporary until browser have fixed the issue with position: sticky causing the header to bounce on scroll in non-native apps // https://github.com/Expensify/App/issues/15282 // https://bugs.chromium.org/p/chromium/issues/detail?id=734461 -export default {top: -1}; +export default { + top: -1, +}; diff --git a/src/styles/styles.js b/src/styles/styles.js index 8b84e4a40c95..50104821d8fa 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -15,11 +15,11 @@ import codeStyles from './codeStyles'; import visibility from './utilities/visibility'; import writingDirection from './utilities/writingDirection'; import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles'; +import emojiHeaderContainerPlatformStyles from './emojiHeaderContainerPlatformStyles'; import pointerEventsNone from './pointerEventsNone'; import pointerEventsAuto from './pointerEventsAuto'; import overflowXHidden from './overflowXHidden'; import CONST from '../CONST'; -import emojiHeaderContainerPlatformStyles from './emojiHeaderContainerPlatformStyles'; const picker = { backgroundColor: themeColors.transparent,