[$500] Workspace - No space between 3 dots and admin

[kbecciv]

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: v1.4.11-23
Reproducible in staging?: y
Reproducible in production?: y
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:

Action Performed:

1. Open the app and login with user having long username
2. Click on plus and click on start chat
3. Observe that we maintain gap between 3 dots of username and 'Add to group' button
4. Similarly, open settings->workspaces->any workspace->members
5. Observe that there is no space between 3 dots of username and admin tab

Expected Result:

App should maintain space between 3 dots of username and admin tab on members page as we maintain on similar layout start chat page between 3 dots and 'Add to group' button

Actual Result:

App does not maintain space between 3 dots of username and admin tab on members 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

Bug6311242_1702445804419.windows_chrome_-_no_space_between_3_dots_and_admin.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019c7f37fb82d95dae
• Upwork Job ID: 1734937400008077312
• Last Price Increase: 2023-12-13
• Automatic offers:
• cubuspl42 | Reviewer | 28064586

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~019c7f37fb82d95dae

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @cubuspl42 (External)

[dukenv0307]

Proposal

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

App does not maintain space between 3 dots of username and admin tab on members page

What is the root cause of that problem?

In UserListItem, we don't have the space between the admin and the three dots

App/src/pages/workspace/WorkspaceMembersPage.js

Line 370 in 2782381

<View style={[styles.badge, styles.peopleBadge]}>

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

We should add padding horizontal 8px to the same with Add to group button

App/src/pages/workspace/WorkspaceMembersPage.js

Line 370 in 2782381

<View style={[styles.badge, styles.peopleBadge]}>

What alternative solutions did you explore? (Optional)

We can add padding-right here which can make sure that we always have the space between text and the right element.

App/src/components/SelectionList/UserListItem.js

Line 21 in 2782381

<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.optionRow]}>

[ZhenjaHorbach]

Proposal

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

Workspace - No space between 3 dots and admin

What is the root cause of that problem?

We don't have margin values for admin badge

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

We can update styles and add margin value for peopleBadge which is used only for admin badge

If we change padding we will change the size of badge

App/src/pages/workspace/WorkspaceMembersPage.js

Lines 369 to 373 in 2782381

	rightElement: isAdmin ? (
	<View style={[styles.badge, styles.peopleBadge]}>
	<Text style={styles.peopleBadgeText}>{props.translate('common.admin')}</Text>
	</View>
	) : null,

App/src/styles/styles.ts

Lines 2857 to 2860 in 2782381

	peopleBadge: {
	backgroundColor: theme.icon,
	...spacing.ph3,
	},

For example spacing.ml2, (We use the same left padding for the selection buttons in OptionRow. OR something else. But here we need the help of designers.)

What alternative solutions did you explore? (Optional)

Plus the first proposal was made at the same time
But without any specifics and with other proposal

[namhihi237]

Proposal

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

We need to add space between 3dots and admin text

What is the root cause of that problem?

Currently we don't have the space in the text and label

App/src/components/SelectionList/UserListItem.js

Lines 47 to 48 in 2782381

	{Boolean(item.rightElement) && item.rightElement}
	</>

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

We should add space here, I think margin 12 or 16px

App/src/components/SelectionList/UserListItem.js

Lines 47 to 48 in 2782381

	{Boolean(item.rightElement) && item.rightElement}
	</>

What alternative solutions did you explore? (Optional)

[mghazanfar]

Proposal

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

We see no space between ellipsis text and Admin badge.

What is the root cause of that problem?

No proper spacing.

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

Applying latest CSS grid is the best practice for this with proper gap between columns.

This is how it will look

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[mghazanfar]

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

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[dragnoir]

Proposal

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

Workspace - No space between 3 dots and admin

What is the root cause of that problem?

App/src/components/SelectionList/UserListItem.js

Line 47 in d6755d6

{Boolean(item.rightElement) && item.rightElement}

Margin-Left missing on the admin rightElment.

App/src/styles/styles.ts

Lines 2862 to 2865 in d6755d6

	peopleBadge: {
	backgroundColor: theme.icon,
	...spacing.ph3,
	},

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

Add Margin-left: 12px spacing.ml3 to the peopleBadgestyle. This is better because it doesn't add space when there's no badge.

spacing.mh2 is a wrong answer, because it adds margin on the left and on the right too.

peopleBadge: {
            backgroundColor: theme.icon,
            ...spacing.ph3,
            ...spacing.ml3,
        },

POC

[cubuspl42]

I approve the proposal by @dragnoir

As the scope of this issue is narrow, a proposal mentioning a specific style from our stylesheet was appropriate. As I understand it, it was the first proposal to mention a correct style.

C+ reviewed 🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @techievivek, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @cubuspl42 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dragnoir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[johncschuster]

Just caught up. I see we've approved @dragnoir's proposal. I've just assigned the issue to them.

Thanks!

[dragnoir]

PR will be ready in the next 24 hours.

[dragnoir]

@johncschuster @cubuspl42 it's my 1st payment, when can I expect to get paid?

[cubuspl42]

@dragnoir It seems the automation didn't run here, and the payment wasn't processed properly!

@johncschuster @techievivek Friendly bump!

[johncschuster]

Sorry for missing this, @dragnoir! I'll get payment issued today!

[johncschuster]

@cubuspl42, I've issued payment to you.
@dragnoir, I've hired you for the job on Upwork. Once accepted, I'll get payment issued.

Thank you both for your patience!

[dragnoir]

@johncschuster Accepted. Thank you

[dragnoir]

@johncschuster any other steps I need to proceed for the payment to be released, pls!

[cubuspl42]

@dragnoir Just to reassure you, issue handling and payments go much more smoothly with functioning automation. We just started to depend on it. Unfortunately, automation breaks once in a while.

[dragnoir]

I already accepted the offer on Upwork. Also, I think 1st payment is not automatic!

[cubuspl42]

Payments aren't automatic, but the ecosystem around them (Melving bumping the issue, posting payment date, changing the title, etc...) is. Well, should be. Typically is.

[johncschuster]

Payment has been issued. Thank you for your patience!

[melvin-bot]

This issue has not been updated in over 15 days. @cubuspl42, @johncschuster, @dragnoir, @techievivek eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[cubuspl42]

@johncschuster Thanks! I think we can just close this issue now?

[cubuspl42]

@johncschuster Bump, this just needs closing

[melvin-bot]

@cubuspl42, @johncschuster, @dragnoir, @techievivek, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.