[Ready for payment] Account switcher - No spacing between account switcher icon and the status icon

[lanitochka17]

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.26-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Account is a copilot
• Account has a very long name

1. Launch New Expensify app
2. Go to Account settings

Expected Result:

There will be spacing between account switcher icon and the status icon

Actual Result:

There is no spacing between account switcher icon and the status icon
On Android, the icons overlap with each other

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

Bug6585837_1724882296624.ScreenRecording_08-29-2024_05-20-40_1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

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

[bernhardoj]

Proposal

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

No spacing between the account switcher and the status button.

What is the root cause of that problem?

We already set a gap to the container so it will have space between the account switcher and the status button.

App/src/pages/settings/InitialSettingsPage.tsx

Lines 365 to 369 in e77f204

	<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.pb3, styles.gap3]}>
	<AccountSwitcher />
	<Tooltip text={translate('statusPage.status')}>
	<PressableWithFeedback
	accessibilityLabel={translate('statusPage.status')}

However, when the name is really long, it pushes the arrow up & down icon out of the display name box.

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

We can set a flex-shrink of 1 to the display name, so when the name is very long, instead of pushing out the icon, the display name will shrink.

App/src/components/AccountSwitcher.tsx

Lines 142 to 146 in e77f204

	<Text
	numberOfLines={1}
	style={[styles.textBold, styles.textLarge]}
	>
	{currentUserPersonalDetails?.displayName}

[puneetlath]

demoting since Copilot is under beta cc @rushatgabhane

[melvin-bot]

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

[arosiclair]

Looks like the account switcher was added in #47338. @dangrous can you take a look? @rushatgabhane should probably fix this.

[rushatgabhane]

hello please assign it to me.

[dangrous]

Assigned! there are a couple other ones that came through, I'm going to review and then probably assign those as well if that's okay!

[dangrous]

@rushatgabhane setting flex-shrink here should fix it up, do you think you can add that in to the other fixes? Thanks!

[rushatgabhane]

yes, one mega fix is needed

[melvin-bot]

@dangrous, @rushatgabhane, @dylanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[dangrous]

let us know if it would be best to open this for a contributor @rushatgabhane, I know you've got a lot going on

[dylanexpensify]

@rushatgabhane we on track to raise today?? 🙏

[dylanexpensify]

@rushatgabhane @allgandalf @mkhutornyi let's break this down for payment! Who handled which issues (that were priced at $250), and which issues had a regression attached (so $125)?

[allgandalf]

I reviewed (None of those caused regresssion):

• Copilot - Selected access level is not highlighted #48965
• Copilot - Account avatar is missing after switching account on Security page #48966
• Copilot - No message is shown when trying to add the owner as copilot #48967
• [$250] Copilot - "Learn more" link is out of place #48972

Also i'm not sure about one more issue: #48244 , the bug was still reproducible when i tested here and was fixed after that in this commit here so idk if that counts mine or @mkhutornyi. so please help us with that specific issue, rest all seems good to me 👍 (@mkhutornyi correct me please if i am wrong here, no conflicts as such 🙇 )

[rushatgabhane]

@dylanexpensify they shouldn't be priced at $250 per issue. The issues were one liners and that is why I created a single PR for them

[dylanexpensify]

Payment summary:

Contributor: @allgandalf $250 via Upwork
Contributor: @mkhutornyi $250 via Upwork

Please apply here!

[sscodez]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01e8c9c68232abc8e1

 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.pb3, styles.gap3]}> 
     <AccountSwitcher style={{flex:3}}  /> 
     <Tooltip  style={{flex:5}} > 
         <PressableWithFeedback {{flex:2}}
              </PressableWithFeedback >
              </View>

Follow this way make parent view flex 1

[melvin-bot]

📣 @sscodez! 📣
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>

[rakshwinder]

There are several ways to achieve the desired layout. One approach is to allocate 70% of the width for the user's email. If the email length exceeds the 70% container width, you can make it scrollable. Alternatively, you can break the text if needed to fit within the allocated space. In the remaining 30% of the width, display both icons, ensuring there is a 10% gap between them for proper spacing.

[melvin-bot]

📣 @rakshwinder! 📣
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>

[allgandalf]

@dylanexpensify can you pay this one please :))

[dylanexpensify]

Yes, @allgandalf @mkhutornyi from above, mind applying in the link!?

[allgandalf]

done done !!!!

[dylanexpensify]

@allgandalf @mkhutornyi offers sent!

[melvin-bot]

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

[dylanexpensify]

Hey @VictoriaExpensify! I'm heading out on parental leave so reassigning this! All that's left is paying out @mkhutornyi once he's accepted the offer! Job post found here! TY! 🙇‍♂️

[dangrous]

What's the action here? What do we need still to close this out - has payment completed?

[mkhutornyi]

I already accepted offer.

[dangrous]

Got it - so @VictoriaExpensify I think it's up to you to pay out and close!

[melvin-bot]

@dangrous, @rushatgabhane, @VictoriaExpensify, @mkhutornyi, @allgandalf Whoops! This issue is 2 days overdue. Let's get this updated quick!

[VictoriaExpensify]

Sorry, i missed this! Finalising payments now!

[VictoriaExpensify]

Payment summary:
@allgandalf paid $250 via Upwork (was already paid)
@mkhutornyi paid $250 via Upwork