Agent dashboard top bar gets cut with lower resolutions

[hugovalente-pm]

Bug report summary

When opening the agent dashboard and you are on lower resolution (below 1330px) the top bar elements start to get cut.
Note: This issues was also reported on the Cloud

OS / Environment

Not relevant

Netdata version

v1.31.0-447-nightly

Installation method

Not relevant

Component Name

Dashboard

Steps To Reproduce

1. Open the agent dashboard
2. Using browsers device toolbar, go to a resolution below 1330px width
3. See that Sign in button, if you are not signed in, gets cut

Expected behavior

Ideally the top bar should be full responsive but some other improvements could be made to minimize this:

1. The spacing of the header element can be improved by lowering the whitespace/padding between elements
2. The date-time picker can be improved by auto-resizing concerning its contents. Also, the "▶️ Playing" can be shortened by removing the label since the visual metaphor is sufficient.
3. Below 1280px width resolution the left navigation menu will collapse. When expanding will act as an overlay i.e. will not "push" the elements of the page. --> this could be a "nice to have"

[Ferroin]

Confirmed (accidentally) that this can also be reproduced by just opening the agent dashboard in a regular browser window, and then resizing the browser window so that the viewport is really narrow. The alarms button gets cut off on the right first, then other UI elements.

This is much easier to reproduce with longer node names, as the node names appears to be a non-resizable element right now which never gets truncated or elided in any way.

[xPaw]

This issue was closed, but I can still see the top bar getting cut off in v1.38.1.

[hugovalente-pm]

@novykh did you close it because of the work you are currently doing on the Agent dashboard?
if so, we can close with "won't do" because there is other work coming ahead that will replace this dashboard repo