Rearrange top bar to fit on 1024px screens

[MrD-RC]

There is an issue on 1024px wide screens where the dataflash box spills over on to a new row. This hides the save and reboot button. This change has a slight rearrangement, stacking the profile selection boxes vertically. This considerably reduces the width taken up by this. I have also made it so that the dataflash box will hide if the screen is too narrow (less than 1060px).

This needs testing with a flight controller with dataflash connected. Just to make sure the dataflash area is ok when populated.

Fixes #2265

Current layout on large screen

Current layout on 1024 x 768 screen

Notice missing save and reboot button

New layout on large screen

New layout on 1024 x 769 screen

Technically a bug fix. So should be fine for the next 8.0 RC if the change is wanted.

[MrD-RC]

It looks like the data flash box needs to be a little wider on the change. Thanks for checking it out @Jetrell

[Jetrell]

I'm not sure what size monitor you have tested it on Darren. I found results similar to the pictures you added in your post, when reducing the resolution of a 1920 x 1080 display.
But I also deliberately tested it on a laptop with a smaller screen 1366 x 768.
And with that smaller monitor, using both these commits, the 1024 x 768 resolution doesn't show the DataFlash box at all.

And these changes are also effecting the layout above 1060px.. As can be seen below with 1366 x 768 screen.
The box is so compressed that the used memory status line is hardly visible.

While this is what 1366 x 768 looks like with the present configurator screen format.

[MrD-RC]

That's as expected, other than the visible html on the dataflash box. I will get that sorted tonight.

At 1024px wide. The dataflash area should not be visible. There is only so much space. And that seemed like the least important part to keep. The sensors, profiles, and failsafe/warning areas seem more important to me. This stop the top bar from spilling over and hiding the save and reboot button.

[MrD-RC]

After latest change

Full screen

1024 x 768

[b14ckyy]

Very nice change.
also don't forget that its probably not only the resolution but also the UI Scaling in the OS itself thats usually >100% on many laptop screens. Especially small ones like 11"-13". Even with 1080p on a 11" screen the default scaling is 200% so effectively a 960x590 equivalent. But as long as we can cover a 1024x768@100% we should cover 99.9% of systems.