Merge pull request #31679 from software-mansion-labs/fix-overlapping-fab

Fix createMenuPositionSidebar style
Expensify · Dec 7, 2023 · fc4a46f · fc4a46f
2 parents 04f273b + 15e50b4
commit fc4a46f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -1339,7 +1339,7 @@ const styles = (theme: ThemeColors) =>
 
             // The bottom of the floating action button should align with the bottom of the compose box.
             // The value should be equal to the height + marginBottom + marginTop of chatItemComposeSecondaryRow
-            bottom: 25,
+            bottom: variables.fabBottom,
         },
 
         floatingActionButton: {
@@ -1398,7 +1398,9 @@ const styles = (theme: ThemeColors) =>
         createMenuPositionSidebar: (windowHeight: number) =>
             ({
                 horizontal: 18,
-                vertical: windowHeight - 75,
+                // Menu should be displayed 12px above the floating action button.
+                // To achieve that sidebar must be moved by: distance from the bottom of the sidebar to the fab (variables.fabBottom) + fab height (variables.componentSizeLarge) + distance above the fab (12px)
+                vertical: windowHeight - (variables.fabBottom + variables.componentSizeLarge + 12),
             } satisfies AnchorPosition),
 
         createMenuPositionProfile: (windowWidth: number) =>

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -43,6 +43,7 @@ export default {
     avatarSizeMentionIcon: 16,
     avatarSizeSmallSubscript: 14,
     defaultAvatarPreviewSize: 360,
+    fabBottom: 25,
     fontSizeOnlyEmojis: 30,
     fontSizeOnlyEmojisHeight: 35,
     fontSizeSmall: getValueUsingPixelRatio(11, 17),