fix: Dropdown of filterable columns not always visible #2400

[dbranley]

The PR fulfills these requirements: (check all the apply)

• It's submitted to the main branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

Closes #2400

I have fixed this bug, which was a regression that I introduced in PR #2371.

This was resolved by adding wrapping the column name in a span and adding styling to hide overflow text and replace with an ellipsis. The code looks like this:

      <span style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>{props.column.name}</span>

I made local changes to the table.py example to have some really long names and made sure the text is properly clipped and that sorting icon and filtering stuff still works fine. Here's a screen shot:

And here's a short video:

Issue2400_ui_test.mov

I tried creating a new unit test, but that didn't work as I initially expected. No matter how long the column name was, the document always had the entire content. I guess that makes sense since the rendering of the ellipses will occur in the browser. If I'm overlooking something and there is a way to write a unit test for this, please advise.

I did re-run all the existing unit tests and they worked fine:

Let me know if you have any questions or would like me to make any changes. Thanks!

[mturoci]

LGTM, thanks @dbranley!