Repository navigation
[HOLD for payment 2024-08-05] [$250] Bottom docked button views does not use correct SafeSpace in mobile #44056
Description
Activity
Triggered auto assignment to @sakluger (
Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.Proposal
Please re-state the problem that we are trying to solve in this issue.
- Bottom button is very close to the home bar
What is the root cause of that problem?
-
We do not use
includeSafeAreaPaddingBottom:
so there is no safe area padding bottom is applied. -
Also, currently, the "Save" button has style:
App/src/components/Form/FormWrapper.tsx
Line 117 in 29e4c54
-
As we can see, the "Save" button is always at the bottom of the screen without any safe area on its bottom side.
What changes do you think we should make in order to solve the problem?
- We should add an addtional style
safeAreaPaddingBottomStyle.paddingBottom && styles.pb5to thecontainerStyles:
App/src/components/Form/FormWrapper.tsx
Line 117 in 29e4c54
containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles, safeAreaPaddingBottomStyle.paddingBottom && styles.pb5]}- With the above change: In the device where there is no safe area padding-bottom (web, desktop), we do not need to add the additional padding-bottom value
20px, in other words, keep it as it is. In the devices that have safe area padding-bottom (native), add the addtional padding-bottom value as mentioned in here.
What alternative solutions did you explore? (Optional)
-
We have two positions that add the padding-bottom to the screen:
-
One in
ScreenWrapper:
App/src/components/ScreenWrapper.tsx
Lines 239 to 242 in 403cecb
and one inFormWrapper:
App/src/components/Form/FormWrapper.tsx
Line 105 in 403cecb
-
Let say the
safeAreaPaddingBottomStyle.paddingBottomis20. If we useincludeSafeAreaPaddingBottom={true}inScreenWrapper, both of these above padding styles are applied, the real padding-bottom will be20*2 = 40. If we useincludeSafeAreaPaddingBottom={false}, the real padding-bottom will be20. -
In case of this bug, we already applied the safe area padding-bottom,
20, but the design team think it is not enough. And if we need to add more padding-bottom value in case applying safe area padding-bottom is not enough, we can update this:
App/src/components/Form/FormWrapper.tsx
Line 105 in 403cecb
to:
style={[style, safeAreaPaddingBottomStyle.paddingBottom ? {paddingBottom: safeAreaPaddingBottomStyle + 15} : styles.pb5]}In there,
15is just the example, we can modify in the future.@truph01 I think you have the right solution but I think we need to make sure we implement this on all pages that use the bottom-docked green button, not just the display name page.
@shawnborton We can do it by remove
includeSafeAreaPaddingBottom={false}in all screen as I mentioned.Proposal
Please re-state the problem that we are trying to solve in this issue.
Onboarding modal uses incorrect row hover style when hovering over the options
What is the root cause of that problem?
We disable safeAreaPadding for screens with forms as because it is already accounted for in Form Provider here
This is also mentioned in docs here:
App/contributingGuides/FORMS.md
Lines 323 to 331 in 6dc6f81
We still seem to be missing the extra padding below the Form Submit button as we have not configured the styles correctly
What changes do you think we should make in order to solve the problem?
We will remove the bottom padding
style.pb5added here in #40473:
App/src/components/Form/FormWrapper.tsx
Line 105 in 29e4c54
and apply it here:
App/src/components/Form/FormWrapper.tsx
Line 117 in 29e4c54
Cool, I agree that removing
includeSafeAreaPaddingBottom={false}is the way to go for native devices. cc @sakluger I think we are ready to open this one up.Job added to Upwork: https://www.upwork.com/jobs/~01cab23d89474f1097
- changed the title
[-]Bottom docked button views does not use correct SafeSpace in mobile[/-][+][$250] Bottom docked button views does not use correct SafeSpace in mobile[/+]on Jun 21, 2024 37 remaining items
@allgandalf PR #44761 is ready
Update
Still working through the PR, the updated changes are in a base component, so testing and working with the contributor to not cause any regression
Update
PR was deployed to staging, waiting to get it onto production
- changed the title
[-][$250] Bottom docked button views does not use correct SafeSpace in mobile[/-][+][HOLD for payment 2024-08-05] [$250] Bottom docked button views does not use correct SafeSpace in mobile[/+]on Jul 29, 2024 Reviewinglabel has been removed, please complete the "BugZero Checklist".The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.13-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:
If no regressions arise, payment will be issued on 2024-08-05. 🎊
For reference, here are some details about the assignees on this issue:
- @allgandalf requires payment automatic offer (Reviewer)
- @truph01 requires payment automatic offer (Contributor)
BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:
- [@allgandalf] The PR that introduced the bug has been identified. Link to the PR:
- [@allgandalf] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
- [@allgandalf] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
- [@allgandalf] Determine if we should create a regression test for this bug.
- [@allgandalf] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
- [@sakluger] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:
All paid, thanks everyone.
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Version Number: 1.4.86-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1718816465053499
Action Performed:
Expected Result:
There should be proper bottom SafeSpace below the button
Actual Result:
Bottom button is very close to the home bar
Workaround:
unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @Issue Owner
Current Issue Owner: @sakluger / @sakluger