Reader: Make user profile header responsive #98184

DustyReagan · 2025-01-09T21:47:11Z

Related to https://github.com/Automattic/loop/issues/296

Proposed Changes

The PR makes the user profile header responsive for mobile
It borrows styling from ReaderFeedHeader. However, it does not implement ReaderFeedHeader because ReaderFeedHeader takes a site and feed as props and contains site-centric functionality.

Before	After

Before	After

Why are these changes being made?

Improve experience on narrow-width screens.

Testing Instructions

Use Calypso Live
Go to /read/users/218803706 and view the page in various widths and on mobile, and make sure it looks like the screenshots above.
Try some other profile pages to make sure there are no regressions.

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)?

github-actions · 2025-01-09T21:47:23Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129776

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129776&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129776&env=a8c-for-agencies

matticbot · 2025-01-09T21:57:31Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~18 bytes added 📈 [gzipped])

name                                   parsed_size           gzip_size
async-load-calypso-reader-user-stream       +127 B  (+3.0%)      +18 B  (+1.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

matticbot · 2025-01-09T21:59:04Z

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

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

blaze-dashboard
command-palette-wp-admin
help-center
notifications
odyssey-stats
whats-new

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

davemart-in · 2025-01-10T00:20:35Z

Can we just re-use the component we use for the feed details page header instead of having separate components that do pretty much the same thing? The feed header component already has good font-weights, spacing, proportions, and responsive styling:

Desktop

Mobile

DustyReagan · 2025-01-10T21:38:52Z

Thanks for the review, @davemart-in!

Can we just re-use the component we use for the feed details page header instead of having separate components that do pretty much the same thing? The feed header component already has good font-weights, spacing, proportions, and responsive styling:

It's tricky because the ReaderFeedHeader component expects a site and feed as props. We could make a faux site and map user data to it, or we could refactor ReaderFeedHeader to also take a user as a prop, but ReaderFeedHeader also has additional functionality we can't use like the follow button and subscriber count. So, my concern is extending it to work for the user will get complicated because we'll need to add more conditional logic to it.

However, I lifted the styling from ReaderFeedHeader and I think it looks pretty good now. What do you think?

Screen.Recording.2025-01-10.at.2.52.39.PM.mp4

mehmoodak

Thanks for making the header responsive.

client/reader/user-stream/components/user-profile-header/index.tsx

mehmoodak · 2025-01-13T10:54:23Z

client/reader/user-stream/components/user-profile-header/style.scss


-			.reader-avatar {
-				margin: 0 24px 0 0;
+			@include breakpoint-deprecated( '<660px' ) {


Should we use @include break-small or @include break-medium here instead of using the deprecated mixin?

Ideally, yes. This breakpoint combats additional margin added here. There is no standard breakpoint for 660px, and rather than pull on the string to unravel the use of 660px here, I opted to use breakpoint-deprecated( '<660px' ).

If its possible to change both and not use deprecated one then maybe that's best. Otherwise this is fine too.

I'd like to land this PR using breakpoint-deprecated( '<660px' ). I'll timebox an investigation to see if we can refactor the deprecated breakpoint here, and open a separate PR to replace if it seems feasible.

I'm noting that this style would be better at max-width: 781px for the Lists component, as there's no breakpoint-deprecated( '<660px' ) on that page that's when the sidebar collapses.

I'm noting that this style would be better at max-width: 781px for the Lists component, as there's no breakpoint-deprecated( '<660px' ) on that page that's when the sidebar collapses.

*We can handle this as part of a separate PR cleaning up styles for the Lists component.

client/reader/user-stream/components/user-profile-header/style.scss

artemiomorales

Testing in responsive Chrome on desktop, the styles look pretty good to me! It collapses nicely. A couple of comments below.

artemiomorales · 2025-01-14T00:17:22Z

client/reader/user-stream/components/user-profile-header/style.scss

+
+		&__details {
+			flex: 1;
+			min-width: 0;


Do we need the min-width value here? I've checked and it doesn't seem necessary.

It's helpful for really long text. For example, a long name will prevent the flexbox from shrinking past a certain width due to it sizing to the content, and then the bio will also run off the screen with the name. This prevents that.

artemiomorales · 2025-01-14T00:34:37Z

client/reader/user-stream/components/user-profile-header/style.scss

+			&::after {
+				@include long-content-fade( $size: 15% );
+				height: 16px * 1.7;
+				top: auto;


I think the long-content-fade isn't being properly applied. It has position: absolute, so the __display-name needs position: relative so that the fade doesn't appear at the bottom of the page. Even after adding the relative positioning, I don't think it's quite working since the display name content wraps:

I believe we're looking more for something along the following lines, right? To do that, we'd need to add text-wrap: nowrap to the __display-name, and probably fix the positioning of the pseudoelement, as it doesn't seem to be elegantly covering the overflowing letters:

Oh, good find! I updated it, so now it's fading whatever flows out into the 16px padding of the header, and added nowrap to the name.

Ok great! Looking much better at smaller resolutions.

What's the expected behavior when we have long names at higher resolutions? It still looks off in those cases. Should we put overflow: hidden to hide the name past the pseudoelement, or should we wrap the text?

Whoops! I added overflow: hidden. Thanks!

or should we wrap the text?

I'm a bit torn on this. /read/feeds/{feedId} wraps the text, but I'm not sure I like the result. 😅 I'm leaning toward hiding the overflow because it keeps the layout behavior predictable, especially on small screens. We could try this on for size and follow up if it's not working for our users? I could also be convinced otherwise if you feel strongly about it. 😆

@artemiomorales, I'm going to go ahead and ship this PR since it's behind the flag. I'm happy to follow up on it in a new PR! ☺️

I'm going to go ahead and ship this PR since it's behind the flag. I'm happy to follow up on it in a new PR! ☺️

Ok! The overflow sounds good to me. We can also iterate if need be :D

Set max-width to initial

3b92259

Minor adjustment to gutters

5ff3417

DustyReagan self-assigned this Jan 9, 2025

Readd header center alignment

f401fc5

DustyReagan marked this pull request as ready for review January 9, 2025 23:36

DustyReagan requested a review from a team as a code owner January 9, 2025 23:36

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 9, 2025

DustyReagan added 3 commits January 10, 2025 12:56

Merge branch 'trunk' into fix/reader-user-header-img

49bfc25

Responsive header mostly working

14f2339

Minor tweaks

c8a96fa

DustyReagan changed the title ~~Reader: Fix user profile avatar width~~ Reader: Make user profile header responsive Jan 10, 2025

Properly type UserProfileHeader

ec10617

mehmoodak reviewed Jan 13, 2025

View reviewed changes

Use CSS media queries for user profile header avatar

02e7f1e

artemiomorales reviewed Jan 14, 2025

View reviewed changes

DustyReagan added 3 commits January 13, 2025 23:06

Fix long-content-fade

8596b12

Add nowrap to display-name

a14b8fb

Add overflow hidden

d5eb852

mehmoodak approved these changes Jan 14, 2025

View reviewed changes

DustyReagan merged commit 633528c into trunk Jan 15, 2025
11 checks passed

DustyReagan deleted the fix/reader-user-header-img branch January 15, 2025 00:32

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 Jan 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reader: Make user profile header responsive #98184

Reader: Make user profile header responsive #98184

DustyReagan commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited by matticbot

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

davemart-in commented Jan 10, 2025

DustyReagan commented Jan 10, 2025

mehmoodak left a comment

mehmoodak Jan 13, 2025

DustyReagan Jan 13, 2025 •

edited

Loading

mehmoodak Jan 13, 2025

DustyReagan Jan 13, 2025

artemiomorales Jan 14, 2025

artemiomorales Jan 14, 2025

artemiomorales left a comment

artemiomorales Jan 14, 2025

DustyReagan Jan 14, 2025

artemiomorales Jan 14, 2025 •

edited

Loading

DustyReagan Jan 14, 2025

artemiomorales Jan 14, 2025

DustyReagan Jan 14, 2025

DustyReagan Jan 14, 2025

artemiomorales Jan 15, 2025

Reader: Make user profile header responsive #98184

Reader: Make user profile header responsive #98184

Conversation

DustyReagan commented Jan 9, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 9, 2025 • edited by matticbot Loading

matticbot commented Jan 9, 2025 • edited Loading

matticbot commented Jan 9, 2025 • edited Loading

davemart-in commented Jan 10, 2025

DustyReagan commented Jan 10, 2025

mehmoodak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DustyReagan Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

artemiomorales left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

artemiomorales Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DustyReagan commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited by matticbot

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

matticbot commented Jan 9, 2025 •

edited

Loading

DustyReagan Jan 13, 2025 •

edited

Loading

artemiomorales Jan 14, 2025 •

edited

Loading