iOS Copilot - Big empty space next to Full and Access row

[IuliiaHerets]

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.32-0
Reproducible in staging?: Y
Reproducible in production?: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Launch New Expensify app.
2. Go to Account settings > Security.
3. Tap Add copilot.
4. Select a user > Next.

Expected Result:

There should not be big empty space next to Full and Access row.

Actual Result:

There is big empty space next to Full and Access row.
The device used is iPhone 15 Pro Max.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6599565_1726030208559.ScreenRecording_09-11-2024_12-43-45_1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

[pecanoro]

This is pretty minor, just small styling issue, so removing the blocker label

[pecanoro]

@rushatgabhane @fedirjh It seems this PR caused this small bug #47353. I was checking the videos and noticed both were posted before we added the description. Don't forget next time to retest everything if changes have been made!

[dominictb]

Proposal

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

There is big empty space next to Full and Access row.
The device used is iPhone 15 Pro Max.

What is the root cause of that problem?

• In here:
  

  App/src/components/SelectionList/RadioListItem.tsx

  Line 73 in ecb629d

  isAlternateTextMultilineSupported ? {maxWidth: alternateTextMaxWidth} : null,

  
  we are using {maxWidth: alternateTextMaxWidth} style, leads to empty space next to full and access row.

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

• We should introduce new param in RadioListItem, named shouldLeaveRoomForRightSpace, and the default value is true. And in here, pass shouldLeaveRoomForRightSpace={false}.

• Then, update:
  

  App/src/components/SelectionList/RadioListItem.tsx

  Line 73 in ecb629d

  isAlternateTextMultilineSupported ? {maxWidth: alternateTextMaxWidth} : null,

  
  to:

                                shouldLeaveRoomForRightSpace && isAlternateTextMultilineSupported ? {maxWidth: alternateTextMaxWidth} : null,

What alternative solutions did you explore? (Optional)

[pecanoro]

@rushatgabhane Any updates?

[rushatgabhane]

I'm tempted to say we should leave room for the checkmark even when it's not selected, but I don't know that I want to make this a special one-off treatment. Definitely curious for other designers' thoughts on this one. I can see it going either way, but I think leaving room for the checkmark always would probably make it feel a little smoother to switch between options.

Not a bug. In SelectionList, the maxWidth was intentionally added here - #45601 (comment)

[rushatgabhane]

Please close this issue if you agree.
cc: @dannymcclain

[dannymcclain]

I agree that we added this space on purpose to leave room for the checkmark/to prevent the UI from jumping around when you make a selection. But this select list doesn't feel quite right to me for some reason. Should we not have one option pre-selected? Also, it looks like when I do have an option selected, the selected option is missing its background color. cc @Expensify/design for a gut check on all this. We can totally close if this is all expected.

CleanShot.2024-09-16.at.08.17.57.mp4

[shawnborton]

I agree with all of the points Danny is making above! Totally should have a BG color, and totally should have one already selected when you access the list view.

[rushatgabhane]

which option should be selected by default?

[dannymcclain]

Hmm actually looking at the original design doc mocks, maybe I was wrong and there shouldn't be one selected initially.

We might just be able to close this one. Though I will note that the when you do view the list with a selection, the selected item is still missing a background.

[rushatgabhane]

Though I will note that the when you do view the list with a selection, the selected item is still missing a background.

that has been fixed ✅ will take a few days for deployment

[dannymcclain]

Ok in that case I think we should just go ahead and close this one. @shawnborton you good with that?

[shawnborton]

Works for me!