fix: Fix padding and responsive behavior of page header

[virajsanghvi]

Description

Fixes padding and responsive behavior of page header on feature pages

Issues Resolved

• Second row had incorrect right/left margin
• Title was wrapping too quickly
• Titles without breaks won’t wrap
• Noticed title wasn’t aligned vertically center
• Health/Badge isn’t aligned vertically center
• Not spacing between left/right content on larger screens
• Vertical spacing between on smaller screens is large/inconsistent due to eui responsive header behavior

Screenshot

Testing the changes

Tested locally + had UX validate

Changelog

• fix: Fix padding and responsive behavior of page header

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

Attention: Patch coverage is 33.33333% with 2 lines in your changes missing coverage. Please review.

Project coverage is 60.95%. Comparing base (47ae28b) to head (625dc8d).
Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
src/core/public/chrome/ui/header/header.tsx	33.33%	0 Missing and 2 partials ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8600   +/-   ##
=======================================
  Coverage   60.95%   60.95%           
=======================================
  Files        3790     3790           
  Lines       90296    90296           
  Branches    14151    14151           
=======================================
  Hits        55036    55036           
  Misses      31804    31804           
  Partials     3456     3456           

Flag	Coverage Δ
Linux_1	29.29% <0.00%> (ø)
Linux_2	56.39% <33.33%> (ø)
Linux_3	37.72% <0.00%> (+<0.01%)	⬆️
Linux_4	29.91% <0.00%> (ø)
Windows_1	29.31% <0.00%> (ø)
Windows_2	56.34% <33.33%> (ø)
Windows_3	37.72% <0.00%> (-0.01%)	⬇️
Windows_4	29.91% <0.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[zhongnansu]

lgtm!

[ashwin-pc]

Does this also fix the header for application pages like discover, visualize and dashboards?

[virajsanghvi]

Does this also fix the header for application pages like discover, visualize and dashboards?

It does not address any issues on app headers - can you call out what the issue there is?