[$125] Web - Search - Filters - Extra margin below Save button in Category filter

[IuliiaHerets]

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: v9.0.18-1
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com

Action Performed:

1. Go to staging.new.expensify.com/search/filters
2. Click Category.

Expected Result:

There will be no extra margin below the Save button (production behavior).

Actual Result:

There is extra margin below the Save button.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6565196_1723085486947.20240808_104712.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012f06d1723cda4320
• Upwork Job ID: 1821488943174214137
• Last Price Increase: 2024-08-08
• Automatic offers:
• dominictb | Contributor | 103505005

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

Triggered auto assignment to @cristipaval (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @isabelastisser (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.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Web - Search - Filters - Extra margin below Save button in Category filter

What is the root cause of that problem?

Extra padding bottom is applied. When we pass footer component them it is wrapped with FixedFooter which already applies the margin for the footerContent.

App/src/pages/Search/SearchFiltersCategoryPage.tsx

Line 138 in 53eee53

<View style={[styles.flex1, styles.pb5]}>

What changes do you think we should make in order to solve the problem?

Remove styles.pb5.

We should also remove includeSafeAreaPaddingBottom={false} if needed, the default is true so we can remove that.

App/src/pages/Search/SearchFiltersCategoryPage.tsx

Line 129 in 53eee53

includeSafeAreaPaddingBottom={false}

What alternative solutions did you explore? (Optional)

We can use the confirm button in SelectionList and the we can remove footer content from SearchFiltersCategoryPage.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 726 to 738 in 53eee53

	{showConfirmButton && (
	<FixedFooter style={[styles.mtAuto]}>
	<Button
	success
	large
	style={[styles.w100]}
	text={confirmButtonText || translate('common.confirm')}
	onPress={onConfirm}
	pressOnEnter
	enterKeyEventListenerPriority={1}
	/>
	</FixedFooter>
	)}

We need to pass the following props:

                        showConfirmButton
                        confirmButtonText={translate('common.save')}
                        onConfirm={handleConfirmSelection}

[cristipaval]

Definitely a NAB. Demoting.

[cristipaval]

I'm also making it a $125 issue given the low complexity of the issue.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~012f06d1723cda4320

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

[melvin-bot]

Upwork job price has been updated to $125

[dominictb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

There is extra margin below the Save button.

What is the root cause of that problem?

We add pd5 to add more space in IOS device in PR, but does not consider that we do not need to add it in other platform:

App/src/pages/Search/SearchFiltersCategoryPage.tsx

Line 138 in 53eee53

<View style={[styles.flex1, styles.pb5]}>

What changes do you think we should make in order to solve the problem?

We can get:

    const safePaddingBottomStyle = useSafePaddingBottomStyle();

and use it instead of styles.pb5

[BhuvaneshPatil]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Web - Search - Filters - Extra margin below Save button in Category filter

There is one more bug on same page - Save button doesn't have top padding while we give padding on other pages.

Category page - no top padding

Currency page - top padding present

What is the root cause of that problem?

For original issue - Extra bottom padding
That is being added with pb5

App/src/pages/Search/SearchFiltersCategoryPage.tsx

Line 138 in cc4626f

<View style={[styles.flex1, styles.pb5]}>

For issue related to top padding ->
we don't apply top padding to button

App/src/pages/Search/SearchFiltersCategoryPage.tsx

Lines 114 to 120 in cc4626f

	<Button
	success
	text={translate('common.save')}
	pressOnEnter
	onPress={handleConfirmSelection}
	large
	/>

What changes do you think we should make in order to solve the problem?

• For extra bottom padding

We can change pb5 of styles with result of useSafePaddingBottomStyle().
PS - I tried removing it and it worked but as mentioned in other proposal this is for IOS devices.

For adding top padding -
apply pt5 (can be different as well, based on internal engineer opinion) style to button.

Result -

What alternative solutions did you explore? (Optional)

[Mohammed-Ehap-Ali-Zean-Al-Abdin]

Proposal

By change padding bottom of this div and make it 0px (the parent div that contains save button and categories names):

Add padding top by 20px for this div (the parent div of the parent div of the save button):

This is the result:

Contributor details
Your Expensify account email: mohammed.ehap.zean@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/mohammede132?mp_source=share

[melvin-bot]

📣 @Mohammed-Ehap-Ali-Zean-Al-Abdin! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[isabelastisser]

Hey @allroundexperts, can you please review the proposals above? Thanks!

[allroundexperts]

Thanks for the proposals everyone. I think @dominictb's proposal has the correct RCA and the fix makes sense as well. Let's go with them.

@BhuvaneshPatil You're trying to solve another bug here which isn't related to this issue. However, given the simplicity of this, I think we can merge the both into a single bug and pay $125 each to @BhuvaneshPatil and @dominictb. @cristipaval Let me know what you think.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @cristipaval is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[Krishna2323]

@allroundexperts, what do you think about my alternative solution? FixedFooter is already covering the case padding bottom case and we don't need to create the footerContent since it can be created using the props.

App/src/components/FixedFooter.tsx

Lines 16 to 27 in 5dd0d8b

	function FixedFooter({style, children}: FixedFooterProps) {
	const insets = useSafeAreaInsets();
	const styles = useThemeStyles();
	if (!children) {
	return null;
	}
	const shouldAddBottomPadding = !insets.bottom;
	return <View style={[styles.ph5, shouldAddBottomPadding && styles.pb5, styles.flexShrink0, style]}>{children}</View>;
	}

App/src/pages/Search/SearchFiltersCategoryPage.tsx

Lines 112 to 123 in 53eee53

	const footerContent = useMemo(
	() => (
	<Button
	success
	text={translate('common.save')}
	pressOnEnter
	onPress={handleConfirmSelection}
	large
	/>
	),
	[translate, handleConfirmSelection],
	);

[allroundexperts]

@Krishna2323 I'd much rather go with a more simpler solution 😄

[Krishna2323]

@allroundexperts, I believe we can simply remove the padding top because the footerContent is already wrapped in FixedFooter and fixed footer already covers the padding for devices with no padding bottom. Please give me few moments and I will confirm.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 739 in 5dd0d8b

{!!footerContent && <FixedFooter style={[styles.mtAuto]}>{footerContent}</FixedFooter>}

App/src/components/FixedFooter.tsx

Lines 16 to 27 in 5dd0d8b

	function FixedFooter({style, children}: FixedFooterProps) {
	const insets = useSafeAreaInsets();
	const styles = useThemeStyles();
	if (!children) {
	return null;
	}
	const shouldAddBottomPadding = !insets.bottom;
	return <View style={[styles.ph5, shouldAddBottomPadding && styles.pb5, styles.flexShrink0, style]}>{children}</View>;
	}

[Krishna2323]

@allroundexperts, the padding bottom is already covered in FixedFooter. We don't need to add extra padding bottom.

New chat page	Category selector after removing padding bottom from view

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[BhuvaneshPatil]

@cristipaval @allroundexperts Quick Nudge on this comment - #47046 (comment)

[BhuvaneshPatil]

@allroundexperts @cristipaval do we want to cover top padding in this issue as well?
Because it's still not fixed

[isabelastisser]

bump @allroundexperts on the question above. Thanks!

[allroundexperts]

@isabelastisser This is more of a question for you / @cristipaval.

[isabelastisser]

@BhuvaneshPatil In my opinion, we should fix that, too. @cristipaval, do you agree? Thanks!

[isabelastisser]

@allroundexperts, Cristi is on leave. Let's go ahead and fix this, thanks!

[BhuvaneshPatil]

@allroundexperts Do you want me to raise the PR or current assigned contributor will do that? If the automation and all allows, I am happy to raise the PR.

[allroundexperts]

@BhuvaneshPatil You can do that since you were the reporter 😄