Sign In - "STG" label displayed on the right side against "Expensify" label on Sign In page

[kbecciv]

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.14-0
Reproducible in staging?: y
Reproducible in production?: n
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: Applause - Internal Team
Slack conversation:

Issue found when executing PR #31303

Action Performed:

Precondition: User should be Signed Out

1. Open app
2. Observe the "STG" label position against "Expensify" label
3. Sign In to the app
4. Repeat step 2

Expected Result:

The "STG" label position against "Expensify" label should be the same on Sign In and LHN pages

Actual Result:

The "STG" label displays on the right side against "Expensify" label on Sign In page and "STG" label moved to the right against "Expensify" on the LHN page (it looks like a new design/feature on LHN page)

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

Add any screenshot/video evidence

Bug6319476_1702986403010.RPReplay_Final1702983448_2.mp4

View all open jobs on GitHub

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

[melvin-bot]

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

[paultsimura]

According to this PR, this is expected: #32221

@shawnborton @mountiny could you please confirm/reject?

[aimane-chnaif]

This is new design. Let's close!

[shawnborton]

Hmm but that being said, I'm not a huge fan of the placement of this label. I bet we can tuck it into the negative space by the y's tail somewhere? cc @Expensify/design

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[shawnborton]

Not a deploy blocker but I think we should make some updates to this one.

[Pujan92]

Proposal

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

Header badge isn't in the correct place

What is the root cause of that problem?

Badge isn't set with the title View and absolute values aren't correct.

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

We can move badge inside the adjacent View of the title so it will take the correct width to set its absolute position and make changes to bottom and right property values.

                : subtitle}
                {shouldShowEnvironmentBadge && <EnvironmentBadge />}
        </View>

App/src/components/Header.tsx

Lines 46 to 48 in aa1d87c

	: subtitle}
	</View>
	{shouldShowEnvironmentBadge && <EnvironmentBadge />}

bottom: 0,
right: -20,

App/src/styles/index.ts

Lines 3598 to 3599 in aa1d87c

	bottom: -8,
	left: -8,

[aimane-chnaif]

This is not open for proposals.
@MaciejSWM and me will be handling this

[dannymcclain]

@shawnborton I don't really have super strong feelings about this—totally open to any ideas you have!

[mountiny]

@shawnborton I think we should wait for the full ideal nav to be implemented. and I agreee that this is not up for proposals @MaciejSWM will handle this once we decide.

Why I think its not that important is that this badge exists only in staging or dev so no real customers will ever face this so we can take our time

[Julesssss]

Closing based on this comment. please reopen if anyone disagrees