Dynamically truncate text to be the right length for the StyledSelect box

[danascheider]

Context

Fix whatever is going on with StyledSelect

The StyledSelect component currently truncates text to a fixed length of 24 characters to enable it to fit inside. However, we realised that when the text inside contains wide characters, 24 characters is too long. Additionally, at some viewport widths, 24 characters isn't long enough to fill the StyledSelect component's width and looks weird with the text truncated that short. We needed a way to dynamically truncate text to the correct length depending on the size of the component.

Changes

• Use canvas to dynamically truncate text in the StyledSelect component
• Update snapshots
• Skip failing tests (see "Considerations")

Required Tasks

• Add/update automated tests
• Add/update Storybook stories
• Add/update docs
• Verify TypeScript compiles

Considerations

Unfortunately, dynamically sizing the text makes the functionality significantly less testable due to the fact that it makes use of canvas. While the node-canvas package enables canvas to be used in Node environments, the package doesn't support worker_threads, which our testing setup apparently requires. The maintainers have indicated they would like to add this support this year, so instead of deleting the tests that no longer work, I've marked them to be skipped so we can come back to them once a new version node-canvas comes out that provides the support we need.

Manual Test Cases

You can test this by following the repro steps present on the Trello card and seeing that the bug doesn't occur:

1. Create a game called "New Name Has Whitespace Too" (this was the name that originally broke it - it's on account of the Ws, which are the widest letters in non-monospaced fonts)
2. Visit the shopping lists page
3. See that the game you just created is selected
4. See that the game's name is truncated to fit in the header
5. Expand the dropdown
6. See that the name is also truncated in the dropdown

You'll want to test this at multiple viewport widths, paying particular attention to viewport widths between 320px and 480px, inclusive, since at these widths the size of the StyledSelect component changes with the viewport.

You'll also want to ensure that selecting games still works, etc.

Screenshots and GIFs

Screenshots up to 769px are shown. Even this is really overkill because the size of the dropdown is static for viewport widths above 481px.

320px

320px

480px

481px

601px

769px

[danascheider]

These weren't being used.

[danascheider]

The removed imports were not being used.

[danascheider]

48: width of button + side margins