Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Prevent board selector item labels to overflow #1216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlbyIanna merged 2 commits into main from board-selector-overflow
Aug 2, 2022

Conversation

Copy link
Contributor

@AlbyIanna AlbyIanna commented Jul 19, 2022

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)

Copy link
Contributor

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 reacted with thumbs up emoji

@per1234 per1234 added topic: code Related to content of the project itself type: imperfection Perceived defect in any part of project labels Jul 20, 2022
@AlbyIanna AlbyIanna force-pushed the board-selector-overflow branch from 025a245 to f8cb9d3 Compare July 29, 2022 10:08
@AlbyIanna AlbyIanna force-pushed the board-selector-overflow branch from f8cb9d3 to 17c1430 Compare July 29, 2022 10:12
Copy link
Contributor Author

@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'.

Copy link
Contributor

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):
Screen Shot 2022年07月29日 at 17 41 17

With your changes (it's trimmed and only the ellipses are visible):
Screen Shot 2022年07月29日 at 17 40 45

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.
Screen Shot 2022年05月20日 at 10 58 48

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.

Copy link
Contributor Author

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
image

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.

Copy link

91volt commented Aug 1, 2022
edited
Loading

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

Yep I confirm that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@91volt 91volt 91volt approved these changes

+1 more reviewer

@kittaakos kittaakos kittaakos approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
topic: code Related to content of the project itself type: imperfection Perceived defect in any part of project
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /