Fix top bar in job log viewer when panels are enabled

What does this MR do and why?

Fix top bar in job log viewer when panels are enabled

This change corrects the position of the top bar in the log viewer so it has the same position as log page.

It refactor some of the code to generate the styles.

References

• https://gitlab.com/groups/gitlab-org/-/epics/18939

Screenshots or screen recordings

Log page	Full Log viewer

How to set up and validate locally

1. Visit a log (ideally a long log) e.g. https://gdk.test:3000/my-group/my-project/-/jobs/4698

2. Confirm the top bar is correctly positioned, before and after scrolling down.

3. Visit a log in the full log viewer e.g. https://gdk.test:3000/my-group/my-project/-/jobs/4698/viewer

   • A link for the viewer appears on long logs, but you can add /viewer to the URL to reach the page.

4. Confirm the top bar is correctly positioned, before and after scrolling down.

You may test this in the new and old UI:

• echo "Feature.enable(:tailwind_container_queries) && Feature.enable(:paneled_view)" | bundle exec rails c
• echo "Feature.enable(:tailwind_container_queries) && Feature.enable(:paneled_view)" | bundle exec rails c, select New UI

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.