Reader: Make user profile header responsive (#98184)

* Set max-width to initial * Minor adjustment to gutters * Readd header center alignment * Responsive header mostly working * Minor tweaks * Properly type UserProfileHeader * Use CSS media queries for user profile header avatar * Fix long-content-fade * Add nowrap to display-name * Add overflow hidden
Automattic · Jan 15, 2025 · 633528c · 633528c
1 parent edd22c8
commit 633528c
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 13 deletions.
diff --git a/client/reader/user-stream/components/user-profile-header/index.tsx b/client/reader/user-stream/components/user-profile-header/index.tsx
@@ -1,6 +1,5 @@
 import page from '@automattic/calypso-router';
 import { useTranslate } from 'i18n-calypso';
-import ReaderAuthorLink from 'calypso/blocks/reader-author-link';
 import ReaderAvatar from 'calypso/blocks/reader-avatar';
 import SectionNav from 'calypso/components/section-nav';
 import NavItem from 'calypso/components/section-nav/item';
@@ -33,15 +32,22 @@ const UserProfileHeader = ( { user }: UserProfileHeaderProps ): JSX.Element => {
 
 	const selectedTab = navigationItems.find( ( item ) => item.selected )?.label || '';
 
+	const avatarElement = (
+		<ReaderAvatar author={ { ...user, has_avatar: !! user.avatar_URL } } iconSize={ 116 } />
+	);
+
 	return (
 		<div className="user-profile-header">
 			<header className="user-profile-header__main">
-				<ReaderAvatar author={ { ...user, has_avatar: !! user.avatar_URL } } />
+				<div className="user-profile-header__avatar user-profile-header__avatar-desktop">
+					{ avatarElement }
+				</div>
 				<div className="user-profile-header__details">
 					<div className="user-profile-header__display-name">
-						<ReaderAuthorLink author={ { name: user.display_name } }>
-							{ user.display_name }
-						</ReaderAuthorLink>
+						<div className="user-profile-header__avatar user-profile-header__avatar-mobile">
+							{ avatarElement }
+						</div>
+						{ user.display_name }
 					</div>
 					{ user.bio && (
 						<div className="user-profile-header__bio">

diff --git a/client/reader/user-stream/components/user-profile-header/style.scss b/client/reader/user-stream/components/user-profile-header/style.scss
@@ -1,31 +1,95 @@
+@import '@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+
 .is-section-reader {
 	.user-profile-header {
 		max-width: 768px;
 		margin: 0 auto;
+		padding: 0 16px;
+		overflow: hidden;
+
+		&::after {
+			@include long-content-fade( $size: 16px );
+		}
 
 		&__main {
-			align-items: center;
 			display: flex;
 			padding: 36px 0 24px;
+			align-items: center;
 
-			.reader-avatar {
-				margin: 0 24px 0 0;
+			@include breakpoint-deprecated( '<660px' ) {
+				padding-top: 20px;
 			}
 		}
 
+		&__avatar {
+			margin-right: 24px;
+			flex-shrink: 0;
+			width: 116px;
+			height: 116px;
+
+			img {
+				border-radius: 100%;
+				width: 100%;
+				height: 100%;
+			}
+
+			&-mobile {
+				width: 72px;
+				height: 72px;
+				margin-right: 16px;
+				display: block;
+
+				@include break-mobile {
+					display: none;
+				}
+			}
+
+			&-desktop {
+				display: none;
+
+				@include break-mobile {
+					display: block;
+					margin-right: 24px;
+					width: 116px;
+					height: 116px;
+				}
+			}
+		}
+
+		&__details {
+			flex: 1;
+			min-width: 0;
+		}
+
 		&__display-name {
-			font-family: Recoleta, sans-serif;
-			font-size: 2rem;
+			font-family: 'Noto Serif', Georgia, 'Times New Roman', Times, serif;
+			font-size: $font-title-medium;
+			font-weight: 600;
 			line-height: 1.5;
+			margin-bottom: 16px;
+			display: flex;
+			align-items: center;
+			text-wrap: nowrap;
+
+			@include break-mobile {
+				font-size: $font-title-large;
+				margin-bottom: 8px;
+				display: block;
+			}
 		}
 
 		&__bio {
-			/* stylelint-disable-next-line scales/font-sizes */
-			font-size: 1.125rem;
+			font-size: $font-body-large;
+			color: var( --color-text-subtle );
+
+			@include break-mobile {
+				font-size: $font-body;
+			}
 		}
 
 		&__bio-desc {
-			margin-bottom: 0;
+			margin: 0;
 		}
 
 		.section-nav {