Prevent board selector item labels to overflow

[AlbyIanna]

Motivation

As stated in #998, the items of the Board Selector dropdown may overflow in an ugly way if the label is too long.

Change description

Adding overflow: hidden to parent and ellipsis to children.
I also added a tooltip to show the complete board/port combination, so that a user is able to see when hovering over the item.

Other information

Reviewer checklist

• PR addresses a single concern.
• The PR has no duplicates (please search among the Pull Requests before creating one)
• PR title and description are properly filled.
• Docs have been added / updated (for bug fixes / features)

[kittaakos]

I could not verify it; non of my boards pop up with such a long address. I propose getting back to this after RC-9.

[AlbyIanna]

@91volt did the functional review.
@kittaakos does the code look good to you?

If you want to try this PR anyway, you can just open the Board Selector, click on 'Select other board and port' and select any board with a long name, like 'Arduino Circuit Playground Express'.

[kittaakos]

f you want to try this PR anyway, you can just open the Board Selector, click on 'Select other board and port' and select any board with a long name, like 'Arduino Circuit Playground Express'.

Smart 👍

Trying it with and without the PR, I do not think overflow is better here.

Without the changes (the user can see the full name of the board):

With your changes (it's trimmed and only the ellipses are visible):

From the original bug report:

When the address of the connected board is "too long", it can go off from the board selector dropdown widget.

See that the numbers are off from the dropdown. It's not a problem with 'Arduino Circuit Playground Express'. It would be great to verify it with a real example.

[AlbyIanna]

With your changes (it's trimmed and only the ellipses are visible):

This was actually expected by design, the dropdown's items should have a fixed height.
@91volt can you confirm this?

@kittaakos consider that I've also added a tooltip that shows the whole board and port when hovering on an item

It would be great to verify it with a real example.

If you want you can edit the board name or the port by inspecting and editing the HTML in the dev tools, the result should be the same.

[91volt]

This was actually expected by design, the dropdown's items should have a fixed height. @91volt can you confirm this?

Yep I confirm that.