Change css and conf to allow for smaller screens

[Astro-Kirsty]

This makes some changes to fixes #5196 I also adjust the number of headers along the top

In the end utilising the default works well, however, it causes other issues! :( Actually our css is quite complicated (and it should not be!), we can work on that further for v2.0

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 94.60%. Comparing base (28eb4c1) to head (71c8bdf). Report is 12 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #5582 +/- ## ======================================= Coverage 94.60% 94.60% ======================================= Files 232 232 Lines 36370 36370 ======================================= Hits 34408 34408 Misses 1962 1962 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests

[Astro-Kirsty]

[bkhelifi]

It looks rather good now, is not it? If there is remaining issue, you can add a small issue as reminder. Thanks a lot @Astro-Kirsty !!!