[Page Header] Add responsiveness for page header

[zhongnansu]

Description

• Add responsiveness for page header
• Stop converting data source picker actions to popover

Issues Resolved

Screenshot

iShot_2024-09-17_01.01.08.mp4

Testing the changes

Changelog

• skip

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

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[codecov]

Codecov Report

Attention: Patch coverage is 79.41176% with 14 lines in your changes missing coverage. Please review.

Project coverage is 64.05%. Comparing base (9ab4377) to head (f5fba22).
Report is 14 commits behind head on main.

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

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8171      +/-   ##
==========================================
+ Coverage   63.89%   64.05%   +0.16%     
==========================================
  Files        3739     3741       +2     
  Lines       88762    88683      -79     
  Branches    13814    13817       +3     
==========================================
+ Hits        56718    56810      +92     
+ Misses      31446    31261     -185     
- Partials      598      612      +14     

Flag	Coverage Δ
Linux_1	30.05% <1.47%> (+0.08%)	⬆️
Linux_2	58.85% <79.41%> (+0.06%)	⬆️
Linux_3	40.34% <1.47%> (+0.08%)	⬆️
Linux_4	31.43% <1.47%> (+0.06%)	⬆️
Windows_1	30.06% <1.47%> (+0.08%)	⬆️
Windows_2	58.80% <79.41%> (+0.06%)	⬆️
Windows_3	40.34% <1.47%> (+0.08%)	⬆️
Windows_4	31.43% <1.47%> (+0.06%)	⬆️

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.

[virajsanghvi]

Just to confirm, the additional whitespace after removing the popover behavior will be addressed separately?

[zhongnansu]

Just to confirm, the additional whitespace after removing the popover behavior will be addressed separately?
@virajsanghvi What's the whitespace you are referring to? Is it the one from this screenshot?

[virajsanghvi]

Just to confirm, the additional whitespace after removing the popover behavior will be addressed separately?
@virajsanghvi What's the whitespace you are referring to? Is it the one from this screenshot?

Sorry, the space I'm referring to is the whitespace above the area selected in your screenshot.

[zhongnansu]

@virajsanghvi Fixed the spacing issue, and updated the attached video, could you re-review?

[virajsanghvi]

I think we will want to address vertical padding between items but can be done after this cr:

[zhongnansu]

I think we will want to address vertical padding between items but can be done after this cr:

@virajsanghvi This comes with the default EuiFlexItem, to fix it, we need to update in OUI

[virajsanghvi]

I think we will want to address vertical padding between items but can be done after this cr:

@virajsanghvi This comes with the default EuiFlexItem, to fix it, we need to update in OUI

Can we not address with using smaller padding sizes on the elements or a css override? Anyways, may be easier to identify options once its pushed.

[virajsanghvi]

Change looks good assuming checks pass

[virajsanghvi]

nit: are $euiBreakpoints available here? If so, could use $euiBreakpoints['m'] instead of the hard coded value