Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Fix padding and responsive behavior of page header #8600

Merged
merged 2 commits into from
Oct 18, 2024
Merged

fix: Fix padding and responsive behavior of page header #8600

merged 2 commits into from
Oct 18, 2024

Conversation

virajsanghvi
Copy link
Collaborator

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

os responsive 2

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
Copy link

codecov bot commented Oct 15, 2024 •
edited
Loading

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.

@virajsanghvi virajsanghvi marked this pull request as ready for review October 16, 2024 00:01
@virajsanghvi virajsanghvi added backport 2.x look & feel Look and Feel Improvements labels Oct 16, 2024
zhongnansu
zhongnansu approved these changes Oct 16, 2024
View reviewed changes
Copy link
Member

@zhongnansu zhongnansu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

@ashwin-pc
Copy link
Member

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

@virajsanghvi
Copy link
Collaborator Author

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?

@ruanyl ruanyl merged commit db51ee1 into opensearch-project:main Oct 18, 2024
73 of 74 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Oct 18, 2024
@github-actions @opensearch-changeset-bot
fix: Fix padding and responsive behavior of page header (#8600)
07f2e5b 
* fix: Fix padding and responsive behavior of page header

Signed-off-by: Viraj Sanghvi <[email protected]>

* Changeset file for PR #8600 created/updated

---------

Signed-off-by: Viraj Sanghvi <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit db51ee1)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@opensearch-trigger-bot opensearch-trigger-bot bot mentioned this pull request Oct 18, 2024
Merged
AMoo-Miki pushed a commit that referenced this pull request Oct 18, 2024
@opensearch-trigger-bot @github-actions @opensearch-changeset-bot
fix: Fix padding and responsive behavior of page header (#8600) (#8638)
da62958 
* fix: Fix padding and responsive behavior of page header



* Changeset file for PR #8600 created/updated

---------



(cherry picked from commit db51ee1)

Signed-off-by: Viraj Sanghvi <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
amsiglan pushed a commit to amsiglan/OpenSearch-Dashboards that referenced this pull request Oct 19, 2024
@virajsanghvi @opensearch-changeset-bot @amsiglan
fix: Fix padding and responsive behavior of page header (opensearch-p…
1bbae1e 
…roject#8600)

* fix: Fix padding and responsive behavior of page header

Signed-off-by: Viraj Sanghvi <[email protected]>

* Changeset file for PR opensearch-project#8600 created/updated

---------

Signed-off-by: Viraj Sanghvi <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
sejli pushed a commit to sejli/OpenSearch-Dashboards that referenced this pull request Oct 21, 2024
@virajsanghvi @opensearch-changeset-bot @sejli
fix: Fix padding and responsive behavior of page header (opensearch-p…
9a371cc 
…roject#8600)

* fix: Fix padding and responsive behavior of page header

Signed-off-by: Viraj Sanghvi <[email protected]>

* Changeset file for PR opensearch-project#8600 created/updated

---------

Signed-off-by: Viraj Sanghvi <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Qxisylolo pushed a commit to Qxisylolo/OpenSearch-Dashboards that referenced this pull request Oct 30, 2024
@virajsanghvi @opensearch-changeset-bot @Qxisylolo
fix: Fix padding and responsive behavior of page header (opensearch-p…
cdb9dfa 
…roject#8600)

* fix: Fix padding and responsive behavior of page header

Signed-off-by: Viraj Sanghvi <[email protected]>

* Changeset file for PR opensearch-project#8600 created/updated

---------

Signed-off-by: Viraj Sanghvi <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@zhongnansu zhongnansu zhongnansu approved these changes

@ruanyl ruanyl ruanyl approved these changes

@ananzh ananzh Awaiting requested review from ananzh ananzh is a code owner

@kavilla kavilla Awaiting requested review from kavilla kavilla is a code owner

@AMoo-Miki AMoo-Miki Awaiting requested review from AMoo-Miki AMoo-Miki is a code owner

@ashwin-pc ashwin-pc Awaiting requested review from ashwin-pc ashwin-pc is a code owner

@joshuarrrr joshuarrrr Awaiting requested review from joshuarrrr joshuarrrr is a code owner

@abbyhu2000 abbyhu2000 Awaiting requested review from abbyhu2000 abbyhu2000 is a code owner

@zengyan-amazon zengyan-amazon Awaiting requested review from zengyan-amazon zengyan-amazon is a code owner

@manasvinibs manasvinibs Awaiting requested review from manasvinibs manasvinibs is a code owner

@ZilongX ZilongX Awaiting requested review from ZilongX ZilongX is a code owner

@Flyingliuhub Flyingliuhub Awaiting requested review from Flyingliuhub Flyingliuhub is a code owner

@curq curq Awaiting requested review from curq curq is a code owner

@bandinib-amzn bandinib-amzn Awaiting requested review from bandinib-amzn bandinib-amzn is a code owner

@SuZhou-Joe SuZhou-Joe Awaiting requested review from SuZhou-Joe SuZhou-Joe is a code owner

@BionIT BionIT Awaiting requested review from BionIT BionIT is a code owner

@xinruiba xinruiba Awaiting requested review from xinruiba xinruiba is a code owner

@zhyuanqi zhyuanqi Awaiting requested review from zhyuanqi zhyuanqi is a code owner

@mengweieric mengweieric Awaiting requested review from mengweieric mengweieric is a code owner

@LDrago27 LDrago27 Awaiting requested review from LDrago27 LDrago27 is a code owner

@sejli sejli Awaiting requested review from sejli sejli is a code owner

@joshuali925 joshuali925 Awaiting requested review from joshuali925 joshuali925 is a code owner

@huyaboo huyaboo Awaiting requested review from huyaboo huyaboo is a code owner

Assignees
No one assigned
Labels
backport 2.x look & feel Look and Feel Improvements seasoned-contributor v2.18.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@virajsanghvi @ashwin-pc @ruanyl @zhongnansu