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 contributors@expensify.com 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): applausetester+kh270803a@applause.expensifail.com
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

[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?? 🙏

[rushatgabhane]

sorry, forgot to update the issues.
PR above - #48517

[dylanexpensify]

ty!

[allgandalf]

Hey can i get assigned to this issue for reviewing the PR, in total the PR fixed 9 bugs and i tested 9 different test cases, summary here, please decide a fair payment accordingly 🙏

[mkhutornyi]

Btw can I have context why C+ was swapped in the middle (4 hrs after requesting another review from me)? cc: @dylanexpensify
After my initial review, I was waiting for Rushat to fix regression and new bugs.

[rushatgabhane]

@mkhutornyi i think we saw your slack status as out sick so we swapped c+

[rushatgabhane]

anyway, you reviewed 6/10 bugs and 4/10 were reviewed by @allgandalf

so i guess you both can split the payment? i know this isn't ideal but what do you think

[dylanexpensify]

@mkhutornyi i think we saw your slack status as out sick so we swapped c+

It was for this reason

[dylanexpensify]

agree with split

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[rushatgabhane]

oops! looks like we caused a regression

[dangrous]

Ack! based on the proposal though seems like an easy fix

[dylanexpensify]

Nice, let's get it done!

[rushatgabhane]

all fixed

[allgandalf]

Hey this looks ready for payment @dylanexpensify , How is the payment going to be for this issue ?

[dangrous]

Do I need to assign @mkhutornyi and @allgandalf to this one to handle C+ payment? cc @dylanexpensify

[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: ssameershah1200@gmail.com
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>