Recent Feed Overhaul: Improve empty feed styling (#97045)

Changes the styling of empty feed layout so that it takes full viewport height. This will reduce layout shifts and make the layout consistent.
Automattic · Dec 4, 2024 · 8e6cf8f · 8e6cf8f
1 parent f20efe7
commit 8e6cf8f
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/client/reader/recent/style.scss b/client/reader/recent/style.scss
@@ -10,6 +10,9 @@ body.is-reader-full-post {
 .is-section-reader .recent-feed {
 	$recent-feed-spacing: 12px;
 	$feed-card-border-radius: 8px; /* stylelint-disable-line scales/radii */
+	$feed-content-height: calc( 100vh - var( --masterbar-height ) - var( --content-padding-top ) - var( --content-padding-bottom ) );
+
+	height: $feed-content-height !important; // Using !important here to avoid having a lengthy selector.
 
 	@media ( min-width: $break-wide ) {
 		display: flex;
@@ -176,8 +179,6 @@ body.is-reader-full-post {
 	&__post-column {
 		@extend %column-shared;
 		display: none;
-		max-height: calc( 100vh - var( --masterbar-height ) - var( --content-padding-top ) - var( --content-padding-bottom ) );
-		height: fit-content;
 		overflow-y: auto;
 
 		&.overlay {