Skip to content

Reader: Fix search header styles on scroll#101890

Merged
mehmoodak merged 1 commit intotrunkfrom
fix/reader-search-header-styles
Mar 27, 2025
Merged

Reader: Fix search header styles on scroll#101890
mehmoodak merged 1 commit intotrunkfrom
fix/reader-search-header-styles

Conversation

@mehmoodak
Copy link
Member

@mehmoodak mehmoodak commented Mar 26, 2025

Related to #100357

Proposed Changes

  • Fix spacing of search header.
  • Moved search header out of sticky content which is consistent with all other headers and also give us more spacing.
Before After
image image
image image

Why are these changes being made?

While working on #100357 I noticed some broken styling on search header and decided to fix it.

Testing Instructions

  • Go to /reader/search. Verify the spacing with and without scroll.
  • Test on different screen sizes.

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@mehmoodak mehmoodak self-assigned this Mar 26, 2025
@github-actions
Copy link

github-actions bot commented Mar 26, 2025 •
edited by matticbot
Loading

Calypso Live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-138477
Jetpack Cloud live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-138477&env=jetpack
Automattic for Agencies live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-138477&env=a8c-for-agencies

@matticbot
Copy link
Contributor

matticbot commented Mar 26, 2025

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

mehmoodak
mehmoodak commented Mar 26, 2025
View reviewed changes
client/reader/search-stream/index.jsx
<NavigationHeader
title={ translate( 'Search' ) }
subtitle={ translate( 'Search for specific topics, authors, or blogs.' ) }
/>
Copy link
Member Author

@mehmoodak mehmoodak Mar 26, 2025

Choose a reason for hiding this comment

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

On scroll we are not keeping navigation header sticky on top so moving this out to keep it consistent with other pages.

client/reader/search-stream/style.scss
@import "@wordpress/base-styles/variables";

// .has-header-section only applies for logged out views
.layout.has-header-section.is-section-reader .search-stream__fixed-area .navigation-header h1 {
Copy link
Member Author

@mehmoodak mehmoodak Mar 26, 2025

Choose a reason for hiding this comment

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

No change in styles. Just refactor the code to keep all logged out styles at one place.

client/reader/search-stream/style.scss
padding-top: 0;
margin-top: 0;
.search__input-fade::before {
border-radius: 4px;
Copy link
Member Author

@mehmoodak mehmoodak Mar 26, 2025

Choose a reason for hiding this comment

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

Fixes missing top right and bottom right bottom radius.

image

Copy link
Contributor

@artemiomorales artemiomorales Mar 26, 2025

Choose a reason for hiding this comment

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

Nice catch!

client/reader/search-stream/style.scss
width: calc(100% - 96px);
}
}
padding: 24px 0 0;
Copy link
Member Author

@mehmoodak mehmoodak Mar 26, 2025

Choose a reason for hiding this comment

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

Adding padding on top of the fixed area so that we have proper spacing on scroll.

client/reader/style.scss
}
}

// For reader/search
Copy link
Member Author

@mehmoodak mehmoodak Mar 26, 2025

Choose a reason for hiding this comment

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

  1. Added these styles here to keep all navigation-header styles at one place.
  2. Removing bottom margin as now we are giving spacing to search fixed area.

@mehmoodak mehmoodak marked this pull request as ready for review March 26, 2025 11:13
@mehmoodak mehmoodak requested a review from a team as a code owner March 26, 2025 11:13
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 26, 2025
@matticbot
Copy link
Contributor

matticbot commented Mar 26, 2025

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/reader-search-header-styles on your sandbox.

artemiomorales
artemiomorales approved these changes Mar 26, 2025
View reviewed changes
Copy link
Contributor

@artemiomorales artemiomorales left a comment

Choose a reason for hiding this comment

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

Looks good to me!

@mehmoodak mehmoodak merged commit 2b20904 into trunk Mar 27, 2025
16 checks passed
@mehmoodak mehmoodak deleted the fix/reader-search-header-styles branch March 27, 2025 07:51
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@artemiomorales artemiomorales artemiomorales approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@mehmoodak mehmoodak

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mehmoodak @matticbot @artemiomorales

Comments