Ports dropdown clipped by table boundaries

[rak-phillip]

When the dropdown list for ports is displayed at the bottom of the Containers page, it is cut off by the table. This makes it difficult to select the desired port.

Steps to reproduce

Make sure that a container is created with multiple ports mapped. The following command will run an nginx docker container with 5 different ports mapped to the container:

docker run -d -p 8080:80 -p 8081:81 -p 8082:82 -p 8083:83 -p 8084:84 nginx

1. Go to the Containers page
2. Sort the Containers table so that the container with many mapped ports is at the bottom of the list
3. Hover over the more... dropdown for ports

Expected behavior

The dropdown list should be displayed fully, without being cut off by the table.

Actual behavior:

The dropdown list is cut off by the table, making it difficult to select the desired port.

Screenshots

Example of dropdown list cut off by the table

Example of the dropdown list displaying properly when at the top of the list

[IsaSih]

Is this behavior expected? There's still the ... to expose all the ports, but the list is brought above the row, not under. Or should all the ports be displayed in the table, with no cuts?

[rak-phillip]

Is this behavior expected? There's still the ... to expose all the ports, but the list is brought above the row, not under. Or should all the ports be displayed in the table, with no cuts?

It's expected. The problem that the issue describes had to deal with the fact that the popover could render menu options outside of the viewport, making the completely inaccessible.

There's not enough space in the table to display all of the ports in all scenarios, so the popover is still used. The main difference being that it will try to calculate if it should display above or below so that all of ports in the popover remain selectable.