[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 contributors@expensify.com 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): applausetester+kh081006@applause.expensifail.com
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-d]

@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?