[BUG] Top bar badges get cut with lower resolutions

[hugovalente-pm]

Describe the bug

With the introduction of the Lab features component the existing responsiveness issue of the top bar was highlighted, we took free space that gave manouvering margin on smaller screens.

Now the top bar War Room members and Nodes information badges gets cut on lower resolutions, e.g. 1152x732

Note: There is also a ticket on the Agent for this Agent dashboard top bar gets cut with lower resolutions #11735

To Reproduce
Steps to reproduce the behavior:

1. Lower the resolution on your browser, using dev tools console for example
2. Go to 1152x732 or lower
3. See that War Room members badge is not there and Nodes one is cut

Expected behavior
A clear and concise description of what you expected to happen.

Figma link - https://www.figma.com/file/tUaZl2Wzh8KQZYdfdqBf4A/%23159--Top-bar-badges-get-cut-with-lower-resolutions?node-id=0%3A1

Screenshots

Error logs

N/A

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 94.0.4606.81 (Official Build) (64-bit)

Additional context

N/A

[novykh]

how do you wish to handle this?

[hugovalente-pm]

as discussed, let's get @anastako view on this we could change the text to an icon when there isn't enough space or something

[anastako]

@hugovalente-pm this is not a solution on my part. The only solution I see is to design a responsive header

[hugovalente-pm]

@anastako to design a responsive header how long do you think it will take?

[anastako]

This last question affects more the development team, we can provide a responsive header as long as we are aligned on that with the stakeholders.

To fast track this bug these are the 3 solutions that we propose. It is not a matter of deciding which one of the three but all of them.

1. 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.

2. The spacing of the header element can be improved by lowering the whitespace/padding between elements

3)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.

@hugovalente-pm

[anastako]

Figma File :
https://www.figma.com/file/tUaZl2Wzh8KQZYdfdqBf4A/%23159--Top-bar-badges-get-cut-with-lower-resolutions?node-id=0%3A1