[$125] Android - Room - Room name displayed truncated on header and details when using long name

[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.64-4 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team

Action Performed:

1. Open the Expensify app.
2. Tap on FAB and select "Create Chat"
3. Tap on "Room"
4. Create a long name for the room (More than 50 characters) and save it
5. Verify that the name is displayed completely in header and on room details page

Expected Result:

Room name should be displayed in full in header and on details page, despite using a name with more than 50 characters

Actual Result:

Room name in header and in details is truncated when creating a long room name. (More than 50 characters)

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android: Standalone
• [x] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/09c337be-5c38-4769-b8dd-07b565e3be4a

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859338322732202800
• Upwork Job ID: 1859338322732202800
• Last Price Increase: 2024-11-20
• Automatic offers:
• twilight2294 | Contributor | 105029064

Issue Owner

Current Issue Owner: @jjcoffee

[melvin-bot[bot]]

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

[jacobkim9881]

Proposal

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

Room title line is broken on room details page.

What is the root cause of that problem?

https://github.com/Expensify/App/blob/b7fdace7fd14c18e314e008554f07ad35369db6b/src/pages/ReportDetailsPage.tsx#L740

The line for room title is broken here.

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

We can use reportName for StringUtils.lineBreaksToSpaces(reportName)

What alternative solutions did you explore? (Optional)

N/A

[joekaufmanexpensify]

It is expected that we truncate in the header, but we are supposed to show the full name in room details.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[joekaufmanexpensify]

This is a pretty minor bug, so demoting

[melvin-bot[bot]]

Upwork job price has been updated to $125

[github-actions[bot]]

@Shahidullah-Muffakir Your proposal will be dismissed because you did not follow the proposal template.

[Shahidullah-Muffakir]

Proposal

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

Room name is truncated in Room Details page.

What is the root cause of that problem?

Improvement Now the default numberOfLinesTitle 1 is applied

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

https://github.com/Expensify/App/blob/0c99ad07fef6eb83eba46d3cab071ca395d401bf/src/pages/ReportDetailsPage.tsx#L737

here pass a new prop for numberOfLinesTitle, like: numberOfLinesTitle={5}

What alternative solutions did you explore? (Optional)

[twilight2294]

Edited by proposal-police: This proposal was edited at 2024-11-21 11:29:27 UTC.

Proposal

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

Room name displayed truncated on header and details when using long name

What is the root cause of that problem?

In MenuItemWithTopDescription, we do not pass value for numberOfLinesTitle, so it will default to 1: https://github.com/Expensify/App/blob/0c99ad07fef6eb83eba46d3cab071ca395d401bf/src/pages/ReportDetailsPage.tsx#L737-L738 https://github.com/Expensify/App/blob/0c99ad07fef6eb83eba46d3cab071ca395d401bf/src/components/MenuItem.tsx#L362

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

If we do not want to truncate the room name at all we should pass numberOfLinesTitle={0} in MenuItemWithTopDescription, this makes sure that there is no hardcoded limit on the number of lines the title can have.

We would also need to update the combinedTitleTextStyle in MenuItem, we need to break the line if the word doesn't fit the given line:

https://github.com/Expensify/App/blob/00a81dc63f265a9f90a29f2d744a70465924f7f1/src/components/MenuItem.tsx#L461

    const combinedTitleTextStyle = StyleUtils.combineStyles(
        [
.........
            styles.breakWord,
        ],
        titleStyle ?? {},
    );

We did the same thing in previous PR's as well:

• https://github.com/Expensify/App/pull/23246

What alternative solutions did you explore? (Optional)

[NJ-2020]

Proposal

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

What is the root cause of that problem?

Right here we pass shouldTruncateTitle true and set the character limit to 100 https://github.com/Expensify/App/blob/c18812ae3cac59025da0f6c8657750dfcb779a65/src/pages/ReportDetailsPage.tsx#L846-L852

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

We can increase the character limit i.e to 200 or 150

Or we can remove this prop

https://github.com/Expensify/App/blob/0c99ad07fef6eb83eba46d3cab071ca395d401bf/src/pages/ReportDetailsPage.tsx#L851-L852

What alternative solutions did you explore? (Optional)

[jjcoffee]

Let's go with @twilight2294's proposal. We don't want any truncation so it makes sense to make the numberOfLinesTitle unlimited.

The first proposal has the correct RCA, but adds a limit on the numberOfLinesTitle. The last proposal refers to a part of the code that doesn't relate to the room title.

:ribbon::eyes::ribbon: C+ reviewed

[melvin-bot[bot]]

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

[Shahidullah-Muffakir]

Let's go with @twilight2294's proposal. We don't want any truncation so it makes sense to make the numberOfLinesTitle unlimited.

The first proposal has the correct RCA, but adds a limit on the numberOfLinesTitle. The last proposal refers to a part of the code that doesn't relate to the room title.

🎀👀🎀 C+ reviewed

@jjcoffee I don't think passing numberOfLinesTitle={0} will work, can we test it please? and as I mentioned, I gave 5 as an example we can increase the number of lines.

[jjcoffee]

@Shahidullah-Muffakir I have tested it. You can also check out the docs to see that 0 is supported.

[Shahidullah-Muffakir]

@jjcoffee , maybe I am missing something because when I pass numberOfLinesTitle={0}, this is the output, where the complete name of the room is not shown

[twilight2294]

[Shahidullah-Muffakir]

https://github.com/user-attachments/assets/3111a1f0-81de-4595-a34c-8f2f3f4b29ce

[Shahidullah-Muffakir]

Room name has a character limit of 100. Considering this, setting numberOfLinesTitle={5}should be sufficient.

https://github.com/Expensify/App/blob/376f9f08755b0555cf3666c5a880542af57c7da1/src/pages/settings/Report/RoomNamePage.tsx#L73

[jjcoffee]

Oh yes you're right that on Chrome web it's not displaying correctly (it does work on Android though). I believe there's probably a style fix for that, since it works in the example given for the TaskView description:

https://github.com/Expensify/App/blob/e3331db018e826dc20bb34ad33b3fb77ee6e8fb8/src/components/ReportActionItem/TaskView.tsx#L141-L152

Having said that since the room name has a char limit, we could decide on a numberOfLines that makes sense, although this has the downside that if we ever increase the char limit, we'd have to remember to update numberOfLines. So I still slightly lean towards making it unlimited and fixing the style.

We do set a limit for the TaskView title here though:

https://github.com/Expensify/App/blob/e3331db018e826dc20bb34ad33b3fb77ee6e8fb8/src/components/ReportActionItem/TaskView.tsx#L117-L124

I'll leave it to @chiragsalian to make the final decision. I must say the level of detail in the proposal that has it as a solution is pretty unacceptable though, especially for such a simple issue.

[twilight2294]

~FYI this is a chrome specific issue i guess, the expected result is matched well on safari:~

sorry investigating

[twilight2294]

@jjcoffee I got what was happening here, there was no word break here, so even when we were allowing multi-lines then too for a single word long enough it wasn't going to the new line, I have fixed that and also updated the proposal:

c.c. @chiragsalian

[FitseTLT]

Proposal

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

Android - Room - Room name displayed truncated on header and details when using long name

What is the root cause of that problem?

We are defaulting to numberOfLinesTitle value of 1 as we are not passing numberOfLinesTitle prop here https://github.com/Expensify/App/blob/0c99ad07fef6eb83eba46d3cab071ca395d401bf/src/pages/ReportDetailsPage.tsx#L737-L738

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

For only room chats isUserCreatedPolicyRoom we should pass numberOfLinesTitle of 0

                    numberOfLinesTitle={isUserCreatedPolicyRoom ? 0 : 1}

and set breakWord style in menu item if the numberOfLinesTitle is zero here https://github.com/Expensify/App/blob/2d2555b173b47c0bce0b1c16b275f1f98639664c/src/components/MenuItem.tsx#L468

            numberOfLinesTitle === 0 && styles.breakWord,

We can optionally pass down the breakWord title style from the MenuItemWithTopDescription for cases of room or pass some boolean param shouldBreakWord and add the style when it is true only for our room case

What alternative solutions did you explore? (Optional)

Optionally we can set the numberOfLinesTitle to higher value that matches the room name length limit

[FitseTLT]

@jjcoffee Can you please check my proposal you are choosing a wrong proposal that would unnecessarily break the menu truncation and break word behaviour of other reports too like group chat. We only want to apply the changes to rooms 👍

[twilight2294]

We are fixing for all type of reports except for expense reports @FitseTLT

[jjcoffee]

@FitseTLT Please explain, preferably with screenshots, in what way the proposal would break group chats.

[FitseTLT]

@jjcoffee It will remove the truncation for group chats we should apply the changes only for rooms according to https://github.com/Expensify/App/issues/52836#issuecomment-2489516532

[jjcoffee]

@joekaufmanexpensify Any thoughts on this? From the issue you linked to:

We'd show the full room name in room details, as this should be the source of truth for what the room actually is.

I would think this reasoning would apply to other areas (to have a source of truth for the full name).

[joekaufmanexpensify]

Is the question whether we should apply the same solution to group chat names in addition to rooms names on the details page?

If so, the default group chat name is just a list of all the members, right?

[FitseTLT]

Is the question whether we should apply the same solution to group chat names in addition to rooms names on the details page?

If so, the default group chat name is just a list of all the members, right?

@joekaufmanexpensify It can also be set to any custom name

[joekaufmanexpensify]

Yep, that makes sense. My concern is more with the default name. Group chats can be quite large. If we don't truncate the name at all and a group uses the default name and it has let's say 100 members, would we show all of them on the details page? That would be quite long...

Whereas a custom name is going to be capped by the character limit.

[FitseTLT]

Yep, that makes sense. My concern is more with the default name. Group chats can be quite large. If we don't truncate the name at all and a group uses the default name and it has let's say 100 members, would we show all of them on the details page? That would be quite long...

Whereas a custom name is going to be capped by the character limit.

Yep. That's why I saying we should only apply the change for rooms 👍

[Shahidullah-Muffakir]

Yep, that makes sense. My concern is more with the default name. Group chats can be quite large. If we don't truncate the name at all and a group uses the default name and it has let's say 100 members, would we show all of them on the details page? That would be quite long...

Whereas a custom name is going to be capped by the character limit.

I think passing numberOfLinesTitle={5} will work for these cases as well.

[twilight2294]

would we show all of them on the details page? That would be quite long...

No we won't.

@joekaufmanexpensify that won't be a problem with my proposal, because we limit group names to 100 characters (so even when we have 100 members, only the name would be upto 100 characters), so all the others. @jjcoffee i did test with groups as well

Whereas a custom name is going to be capped by the character limit.

Default as well as custom are capped at 100

c.c. @jjcoffee

Here's the proof too:

https://github.com/user-attachments/assets/f51d46b3-c0f7-4502-8e3b-fc393894a64b

So overall, we can safely remove the truncation for all room types in this case @joekaufmanexpensify with no side effects from that

c.c. @chiragsalian as well, since the C+ selected my proposal and we cleared that we want the name to be whole for all type of rooms

[FitseTLT]

@shawnborton What would be your design perspective on this issue?

[shawnborton]

@FitseTLT can you summarize what decisions you need help making?

[FitseTLT]

@FitseTLT can you summarize what decisions you need help making?

According to the OP we were aiming to display the full room name in report details page room name Menu item like

First do you agree with that? Then came another point whether we should apply the same behaviour for all reports such as for group chats like

WDYT about that too

[chiragsalian]

My opinion,

1. We should show the full room name in the details section.
2. We should not show the full group name. Group name should still be truncated. This is because group names don't have the same 100 character limit unless you edit it. Before you edit it can be very long and possibly screw up the details UI.
3. But with that said room name and group name should be of the same number of max lines so it's consistent.

Those are my thoughts but I'll let @shawnborton weigh in from a design perspective. Let me know if you've understood where we're at and if not i can summarize again.

[twilight2294]

This is because group names don't have the same 100 character limit unless you edit it

@chiragsalian if you check the video here, there is a 100 character limit for default group name as well

The default as well as custom group name have a limit of 100 characters

[chiragsalian]

if you check the video https://github.com/Expensify/App/issues/52836#issuecomment-2494174257, there is a 100 character limit for default group name as well

No i don't think that's proof. Feel free to correct me if i am mistaken. So here I have a group report with this group name,

chirag.exp.test1@gmail.com, chirag.exp.test1+a@gmail.com, chirag.exp.test1+b@gmail.com, chirag.exp.test1+c@gmail.com, chirag.exp.test1+d@gmail.com, chirag.exp.test1+e@gmail.com, chirag.exp.test1+f@gmail.com, chirag.exp.test1+g@gmail.com, chirag.exp.test1+h@gmail.com, chirag.exp.test1+i@gmail.com, chirag.exp.test1+j@gmail.com, chirag.exp.test1+k@gmail.com, chirag.exp.test1+l@gmail.com, chirag.exp.test1+m@gmail.com, test

Thats 400+ characters and i see it fully here,

If we show the same without a character limit in the report details screen it will be very long. Only once i edit it will it show me that i have to reduce the number of characters to 100.

[FitseTLT]

@chiragsalian We only show the first 5 emails of the participants for group chats in details page that's what is tricking @twilight2294 https://github.com/Expensify/App/blob/2b312769d1bb8b621b30a11be26fddcbd4b9c738/src/libs/ReportUtils.ts#L2269-L2270 but that still can surpass 100 chars if the logins are very long.

[shawnborton]

I don't think I feel too strongly. I think the reality is that most room name aren't actually going to be that long. But I do like the idea of being consistent with room/group names everywhere.

[joekaufmanexpensify]

Ah, if we're only showing the first 5 logins in the default group chat name anyway, then that alleviates my concern. I agree it'd be nice to do the same thing with rooms/group names.

[twilight2294]

sounds great!, @chiragsalian can you assign me then ? my proposal is inline with the expected result of this discussion and C+ approved

[chiragsalian]

Sure, go for it. Feel free to create the PR.

[melvin-bot[bot]]

📣 @twilight2294 🎉 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 📖

[twilight2294]

PR ready for review @jjcoffee

[joekaufmanexpensify]

PR in review