[$500] Android - Workspace - Gap between the dots and the admin tag is big, name is very cut off

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Found when executing PR: #33293

Version Number: v1.4.16-4
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
2. Login with any account
3. Go to Settings -> Workspace -> Open any WS -> Member
4. Notice that the gap between the dots and the admin tag is big, name is very cut off

Expected Result:

Gap between the dots and the admin tag is not so big, name is not cut off so much

Actual Result:

Gap between the dots and the admin tag is big, name is very cut off

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

Bug6324799_1703324917429.Record_2023-12-22-21-24-25_4f9154176b47c00da84e32064abf1c48.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017b6f39b9a20b0de4
• Upwork Job ID: 1738521163245367297
• Last Price Increase: 2023-12-30
• Automatic offers:
• aswin-s | Contributor | 28089976

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017b6f39b9a20b0de4

[melvin-bot]

Triggered auto assignment to @anmurali (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 - @sobitneupane (External)

[aswin-s]

Proposal

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

Admin name label on Workspace invite member page is not taking full width

What is the root cause of that problem?

UserListItem component has a container with flex direction set as column and alignItems property set to flexStart. This causes child elements to not fill the entire width.

App/src/components/SelectionList/UserListItem.js

Line 21 in b74be72

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

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

Set alignItems style of container to alignItemsStretch. This will cause all child elements to stretch to full width of the parent and use the available width.

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

Result

Before	After

What alternative solutions did you explore? (Optional)

None (edited)

[melvin-bot]

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

[melvin-bot]

@anmurali, @sobitneupane Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@anmurali, @sobitneupane 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

@anmurali, @sobitneupane 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[anmurali]

@sobitneupane - can you review the proposal posted above?

[sobitneupane]

Proposal from @aswin-s looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

@anmurali @sobitneupane @roryabraham this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 @aswin-s 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[roryabraham]

Minor piece of advice @aswin-s – if you put before/after screenshots in a table they become much easier to look at 🙂

Before	After

Or replace the ![Screenshot](url) with a <img src="url" alt="" width="350px" />, that works too if the table makes things too small.

[aswin-s]

@sobitneupane Could you please have a look at the PR?

[sobitneupane]

Sorry for the delay @aswin-s. I will try to get to it asap. But I will have to ask you to wait for 1 day or 2 days. I am working partially and it's not a high priority issue.

[mkhutornyi]

This caused regression - #35691

[aswin-s]

PR got deployed to prod last week. However the status is not updated here.

[aswin-s]

@anmurali Gentle Reminder ☝️

[anmurali]

Payment Summary:

• Contributor: @aswin-s paid via Upwork $500
• Contributor+: @sobitneupane on ND $500

[JmillsExpensify]

$500 approved for @sobitneupane based on summary.