Minor changes to connection icon 13788

[simonkellly]

Fixes #13788

[gregorbg]

Cool, super happy with the code, thank you for diving into NextJS!

Regarding the actual screenshots: I feel that the small indicator bubble still has two problems:

1. On desktop, it is extremely tiny compared to the huge font
2. The horizontal gap between dot and text is too small

What do you think? Are you happy with the visuals as they are now? Then we can proceed with merging. Otherwise, please play around with the layout of the "dot plus text" to your hearts desire and let me know when you think it's polished!

[simonkellly]

Potentially something like this?

[gregorbg]

Cool! I would love some input from other folks, but I really like the vibe. My two cents [consider this my taste opinion as an individual, not instructions as a Team Leader]:

1. The colorful badge is stealing visual attention from the actual heading. Move it right to where the "Show combined results" button is
2. Will the written content of the badge include the full "Lost connection, results are not being updated" i18n string? That might be a bit too much...

Other opinions warmly welcome, I'm not a designer by any means 😅

[FinnIckler]

I would move it next to the header, but not floating right like the toggle

[simonkellly]

Having played around with it a bit, putting it on the right with the actions makes the layout more consistent especially at smaller screen sizes with the way the current layout is setup. Potentially it could be moved around some more but would likely require optimising the layout for smaller screens further.

[gregorbg]

Kindly ping @simonkellly

[simonkellly]

Current appearance, reverted the bold text on the badge so that it just uses the normal badge

[simonkellly]

Went for just putting the component twice in the correct locations rather than a more complex solution