[HOLD for payment 2024-10-29] Attachment - Extra space between download and close button

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.50-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Open a report.
3. Send an image.
4. Click on the image.

Expected Result:

There will be no extra space between download and close button.

Actual Result:

There is extra space between download and close button.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6637291_1729143375378.20241017_133423.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[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.

[mkzie2]

Proposal

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

There is extra space between download and close button.

What is the root cause of that problem?

We added gap4 in #49984:

App/src/components/HeaderWithBackButton/index.tsx

Line 194 in c4f7088

<View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.gap4, styles.alignItemsCenter]}>

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

This was added to loosen the distance between the action buttons and search icon in this case: #49984 (comment).

Remove the gap4 style. Instead add margin to the Search icon instead.

App/src/components/HeaderWithBackButton/index.tsx

Line 266 in c4f7088

{shouldDisplaySearchRouter && <SearchButton />}

[rayane-djouah]

@Expensify/design, could you confirm whether this is a bug or not?

[shawnborton]

Hmm to me, the gap between button and icon on the Search page feels too big. I think we should just standardize on the gap we used to have in the attachment modal between close and download, and try to use that same gap everywhere for this. What was it previously?

[dannymcclain]

@shawnborton That sounds good to me—I think the examples above (Workspaces & room) look too close. But I agree that the search/Expenses screen could be a little tighter. We've previously decided to use an 8px gap between horizontal button groups—can we just standardize on that everywhere?

[shawnborton]

I can definitely get down with that, yup!

[madmax330]

@Kicu can you look at this one since your PR introduced it?

[SzymczakJ]

I'll take care of that since I've also worked on that PR

[SzymczakJ]

I've removed the change in header of AttachmentModal and all other headers that were affected by this change. Also fixed all other places**(set everything to 8px gap)** that we mentioned and that had in them. Please take a look @Expensify/design:

[dannymcclain]

Personally I think that is glorious. :chefkiss:

[shawnborton]

Same, this looks great!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.51-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Search router polish  #50921

If no regressions arise, payment will be issued on 2024-10-29. 🎊

[melvin-bot]

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:

• [@madmax330] The PR that introduced the bug has been identified. Link to the PR:
• [@madmax330] 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:
• [@madmax330] 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:
• [@madmax330] Determine if we should create a regression test for this bug.
• [@madmax330] 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.
• [@lschurr] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[lschurr]

No payment here since this was a regression from: #49984

Closing.