If the user's display name is less than 275px, then it should look exactly like it does today. If it is 275px or more, then it should be truncated:
What has been done to verify that this works as intended?
I tried it out locally.
Why is this the best possible solution? Were any other approaches considered?
275px is a bit long, but there are places in Central where we allow text to go 250px before truncation. There's room in the navbar, and I think it's nice to avoid truncation in this case, so I opted for a little more than 250px. Especially if we ever add more to the navbar, I think we could also consider removing the name from the navbar and using generic text like "My Account".
In terms of the code, the hardest part was keeping the icon on the left, the text, and the caret on the right aligned. I was initially running into issues there, but vertical-align: top; did the trick. I also briefly tried a flexbox strategy, but I found myself having to do some manual alignment.
Before submitting this PR, please make sure you have:
[x] run npm run test and npm run lint and confirmed all checks still pass OR confirm CircleCI build passes
[x] verified that any code or assets from external sources are properly credited in comments or that everything is internally sourced
Closes #348.
If the user's display name is less than 275px, then it should look exactly like it does today. If it is 275px or more, then it should be truncated:
What has been done to verify that this works as intended?
I tried it out locally.
Why is this the best possible solution? Were any other approaches considered?
275px is a bit long, but there are places in Central where we allow text to go 250px before truncation. There's room in the navbar, and I think it's nice to avoid truncation in this case, so I opted for a little more than 250px. Especially if we ever add more to the navbar, I think we could also consider removing the name from the navbar and using generic text like "My Account".
In terms of the code, the hardest part was keeping the icon on the left, the text, and the caret on the right aligned. I was initially running into issues there, but
vertical-align: top;did the trick. I also briefly tried a flexbox strategy, but I found myself having to do some manual alignment.Before submitting this PR, please make sure you have:
npm run testandnpm run lintand confirmed all checks still pass OR confirm CircleCI build passes