Web - Room - Drop down is longer than expected when the account has workspace with longer names

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to https://staging.new.expensify.com
2. Log in with expensifail account
3. Click on Fub menu
4. Click Create New Room
5. Type any name of the room
6. Click on dropdown for Workspaces

Expected Result:

Drop down should look the same when the account has workspace with longer names

Actual Result:

Drop down is longer than expected when the account has workspace with longer names

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1.49.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): applausetester+0709abb@applause.expensifail.com/Feya87Katya

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @joelbettner (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[joelbettner]

I don't know if this is a problem. I'm assuming when you say the dropdown is "longer", you're referring to the width of the dropdown, correct? It looks like the workspaces dropdown adjusts to a width in order to display the full name of the workspace.

[melvin-bot]

Triggered auto assignment to @arielgreen (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[joelbettner]

@arielgreen I'm not sure if this is really something that needs to be worked on/fixed. It seems to me that this is the intended design, but I could certainly be wrong. I'll defer to your decision.

[kavimuru]

@joelbettner @arielgreen If the workspace has longer name then its not center oriented too. Attaching screenshot of normal UI with shorter names

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[joelbettner]

I just remembered that @arielgreen is on maternity leave, so I untagged, and then re-tagged with External. @bfitzexpensify you're the lucky one that got assigned.

I'm not so sure this is really an issue, as the non-centered dropdown shows the entire workspace name. But, I'll leave the UI decision up to someone else.

[Puneet-here]

Proposal

we can create a function like this

    truncatePolicyName(policyName) {
        if (policyName.length < 35) {
            return policyName;
        }
        return `${policyName.substring(0, 35)}...`;
    }

and we can use it on line 70 & 82

App/src/pages/workspace/WorkspaceNewRoomPage.js

Line 70 in 3316204

this.setState({workspaceOptions: _.map(workspaces, policy => ({label: policy.name, key: policy.id, value: policy.id}))});

App/src/pages/workspace/WorkspaceNewRoomPage.js

Line 82 in 3316204

this.setState({workspaceOptions: _.map(workspaces, policy => ({label: policy.name, key: policy.id, value: policy.id}))});

like this
label: this.truncatePolicyName(policy.name)

[bfitzexpensify]

Hm yeah I'm also not sure if this needs to be fixed. Showing the full workspace name seems like a good thing, and to achieve that, it will naturally not be centered.

@Puneet-here, what would be the impact of your suggested solution? Would the drop-down be a fixed max width and the workspace name shown with an ellipsis or something similar?

[Puneet-here]

@Puneet-here, what would be the impact of your suggested solution? Would the drop-down be a fixed max width and the workspace name shown with an ellipsis or something similar?

Yes we will show ellipsis for bigger names.

[parasharrajat]

I don't think this needs to be changed at all. That dropdown is created by the browser and every browser will have different behavior. Now, if the browser does not care about it so we shouldn't. Because if there are other apps that have such long values in dropdowns then those all will have the same effect and users should be used to them by now.

In the end, there is nothing available on the web to control the width of the native select dropdown list. we will have to hack our way to it. e.g.#8380 (comment)

[bfitzexpensify]

OK cool, given yourself, @roryabraham and me all think we can leave this, I think we should do that.

Apologies @Puneet-here — please keep an eye out for new issues! We add new things to be fixed very regularly.