[HOLD for payment 2021-11-04] Edit Workspace - Save button does not have correct padding - @parasharrajat

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to a workspace
2. Click on the workspace avatar

Expected Result:

Save button should have correct padding. For example

Actual Result:

Button does not have the correct padding.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.7-3

Reproducible in staging?: Yes
Reproducible in production?: No

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation
Please see the screenshots attached in the Expected and Actual results.

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1633959748110300

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @joelbettner (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[akshayasalvi]

Proposed Solution

In WorkspaceSettingsPage.js, we have a class pageWrapper which has padding: 20 and FixedFooter also has a horizontal padding of 20. Hence, we update the FixedFooter style with

<FixedFooter style={[styles.w100, styles.ph0]}>

Screenshot with the fix:

[parasharrajat]

I know this can be fixed by padding: 0 but that won't be effective for long.

Proposal

The workspace Edit page is not following the best practice as others. I have worked on various pages for creating and fixing issues with layouts.
Check this video, here button is not always fixed. It scrolls with the content.

output_file.mp4

I gave the footer FixedFooter name for a purpose so that it should be fixed at the bottom.But here its failing to do so.

Why it is not fixed?

Because we are adding this inside ScrollView. it is supposed to be placed adjacent to ScrollView. You can check other pages. eg: ProfilePage.

What should we do?

1. I see that we are utilizing a common Layout WorkspacePageWithSections component to create the workspace pages. Thus we will use slots technique where we set different placeholder for JSX in layout component and then pass the parts as props just like children prop.

so Footer will be passed as

<WorkspacePageWithSections
                headerText={this.props.translate('workspace.common.edit')}
                route={this.props.route}
                footer={(
                    <FixedFooter style={[styles.w100]}>
                        <Button
                            success
                            isLoading={policy.isPolicyUpdating}
                            text={this.props.translate('workspace.editor.save')}
                            onPress={this.submit}
                            pressOnEnter
                        />
                    </FixedFooter>
                )}

then in WorkspacePageWithSections on line 76

            {this.props.children(hasVBA, policyID, isUsingECard)}

                    </View>
                </ScrollView>
            //==>    {this.props.footer}
            </ScreenWrapper>

This fix the padding issue at root and Also page layout issue.

If we want to reduce the padding thing then

2. We should just add styles.ph0 to FixedFooter. I know this is proposed already but I am proposing as I reported the issue

.

[MelvinBot]

Triggered auto assignment to @arielgreen (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[trjExpensify]

This is polish for N6, so I'm removing the n6-hold.

[Julesssss]

Taking over to speed up the N6 polish issue.

@parasharrajat thanks for the detailed proposal, I agree that this is the correct solution. Please go ahead.

[MelvinBot]

Triggered auto assignment to @Beamanator (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[trjExpensify]

Posted the job and sent you the offer, @parasharrajat.

[Beamanator]

Merged 3 days ago, not in production yet.

[Beamanator]

As title says, waiting 2 days for payment (not overdue)

[parasharrajat]

Ping for

[trjExpensify]

Paid 👍