irst pass

client/blocks/conversations/list.scss

@@ -1,5 +1,9 @@
 .conversations__comment-list {
 	cursor: initial; // override style from .card.is-clickable
+
+	@include breakpoint-deprecated( "<660px" ) {
+		margin: 0 16px;
+	}
 }
 
 .conversations__comment-list-ul {

client/blocks/reader-feed-header/style.scss

@@ -2,6 +2,10 @@
 	display: flex;
 	margin-bottom: 16px;
 	z-index: z-index(".reader-feed-header", ".reader-feed-header__site");
+
+	@include breakpoint-deprecated( "<660px" ) {
+		margin: 0 16px 16px;
+	}
 }
 
 .reader-feed-header.is-wide-display .reader-feed-header__site {

client/blocks/reader-post-card/style.scss

@@ -29,7 +29,7 @@
 }
 
 .reader-post-card.card {
-	border-bottom: 5px solid var(--color-neutral-0);
+	border-bottom: 5px solid var(--color-neutral-5);
 	border-radius: 6px; /* stylelint-disable-line scales/radii */
 	box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px inset;
 	margin: 0;
@@ -156,6 +156,10 @@
 		.reader-post-card__post {
 			display: inherit;
 			margin: 0;
+
+			@include breakpoint-deprecated( "<660px" ) {
+				margin: 0 16px;
+			}
 		}
 
 		.reader-post-card__post-heading {
@@ -253,6 +257,10 @@
 			.comments__form {
 				margin-top: 0;
 			}
+
+			@include breakpoint-deprecated( "<660px" ) {
+				margin: 24px 16px 0 16px;
+			}
 		}
 	}
 
@@ -289,6 +297,11 @@
 		border-top: none;
 		margin: 20px 0 0 10px;
 		padding-top: 0;
+
+		@include breakpoint-deprecated( "<660px" ) {
+			margin: 20px 0 0 16px;
+			width: calc(100% - 32px);
+		}
 	}
 }
 
@@ -358,6 +371,10 @@
 .reader-post-card__byline {
 	display: flex;
 	font-size: $font-body-small;
+
+	@include breakpoint-deprecated( "<660px" ) {
+		margin: 0 16px;
+	}
 }
 
 .reader-post-card__author::after {
@@ -531,7 +548,7 @@
 
 @include breakpoint-deprecated( "<660px" ) {
 	.reader-post-card__post {
-		margin-left: 0;
+		margin: 0 16px;
 	}
 }
 

client/reader/discover/discover-navigation.scss

@@ -4,9 +4,6 @@
 	&.reader-dual-column {
 		max-width: 968px; // Max width of dual column reader stream.
 	}
-	@media only screen and (max-width: 660px) {
-		padding: 30px 0 0 30px;
-	}
 }
 
 .discover-stream-navigation {
@@ -21,7 +18,7 @@
 		margin-bottom: 0;
 	}
 	@media only screen and (max-width: 660px) {
-		margin: 0 30px -24px;
+		margin: 0 16px -24px;
 	}
 
 	.discover-stream-navigation__left-button-wrapper,

client/reader/following/style.scss

@@ -11,6 +11,7 @@
 	}
 
 	@media (max-width: 660px) {
+		margin: 0 16px;
 		.navigation-header__main {
 			min-height: auto;
 		}

client/reader/list-stream/style.scss

@@ -20,6 +20,10 @@
 	.navigation-header {
 		margin: 0 auto;
 		padding: 0 0 16px 0;
+
+		@include breakpoint-deprecated( "<660px" ) {
+			padding: 0 16px 16px;
+		}
 	}
 }
 

client/reader/search-stream/index.jsx

@@ -173,11 +173,7 @@ class SearchStream extends React.Component {
 		return (
 			<div>
 				<DocumentHead title={ documentTitle } />
-				<div
-					className="search-stream__fixed-area"
-					style={ { width: this.props.width } }
-					ref={ this.handleFixedAreaMounted }
-				>
+				<div className="search-stream__fixed-area" ref={ this.handleFixedAreaMounted }>
 					<NavigationHeader
 						title={ translate( 'Search' ) }
 						subtitle={ translate( 'Search for specific topics, authors, or blogs.' ) }

client/reader/search-stream/style.scss

@@ -8,6 +8,9 @@
 		margin: 0 auto;
 		padding: 16px 0 16px 0;
 	}
+	@include breakpoint-deprecated( "<660px" ) {
+		padding: 0 16px; // Intentionally padding, not margin
+	}
 }
 
 // .has-header-section only applies for logged out views
@@ -64,6 +67,9 @@
 	z-index: 20;
 	-webkit-font-smoothing: subpixel-antialiased; // Fixes fixed elements text aliasing in Safari
 
+	@include breakpoint-deprecated( "<660px" ) {
+		width: calc(100% - 32px);
+	}
 	@include breakpoint-deprecated( ">660px" ) {
 		padding-top: 30px;
 	}

client/reader/stream/style.scss

@@ -263,6 +263,10 @@
 		padding: 16px 0 32px;
 		border-bottom: 1px solid #e9e9ea;
 
+		@include breakpoint-deprecated( "<660px" ) {
+			padding: 16px 16px 32px;
+		}
+
 		+ .reader-post-card {
 			margin-top: 16px;
 		}
@@ -631,6 +635,10 @@
 				font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
 			}
 
+			@include breakpoint-deprecated( "<660px" ) {
+				margin: 0 16px;
+			}
+
 			@include break-medium {
 				.app-promo__qr-code {
 					margin: -20px 0 0;
@@ -878,6 +886,11 @@
 	margin-top: 60px;
 	padding-bottom: 0;
 
+	@include breakpoint-deprecated( "<660px" ) {
+		margin: 0 16px;
+		width: calc(100% - 32px);
+	}
+
 	@include breakpoint-deprecated( ">480px" ) {
 		height: 58px;
 	}

client/reader/style.scss

@@ -17,7 +17,7 @@
 .is-reader-page .search-stream__with-sites.main {
 	margin: 0 auto;
 	@include breakpoint-deprecated( "<660px" ) {
-		margin: 16px;
+		margin: 16px 0;
 	}
 }
 
@@ -95,6 +95,7 @@
 .is-reader-page .is-site-stream .reader-feed-header.has-back-button .reader-feed-header__follow {
 
 	@include breakpoint-deprecated( "<660px" ) {
+		margin: 0 16px;
 		right: 0;
 	}
 
@@ -364,6 +365,12 @@
 	margin-top: 0;
 }
 
+.search-stream__single-column-results .reader-tag-sidebar-recommended-sites {
+	@include breakpoint-deprecated( "<660px" ) {
+		margin-top: 36px;
+	}
+}
+
 .layout.has-header-section.is-section-reader {
 	.layout__header-section {
 		color: var(--studio-white);

client/reader/tag-stream/style.scss

@@ -15,6 +15,10 @@
 	.navigation-header {
 		margin: 0 auto;
 		padding: 0 0 16px 0;
+
+		@include breakpoint-deprecated( "<660px" ) {
+			padding: 0 16px 16px;
+		}
 	}
 }
 
@@ -61,9 +65,8 @@
 	justify-content: space-between;
 	align-items: flex-start;
 
-	@include break-small {
-		padding-top: 20px;
-		padding-bottom: 20px;
+	@include breakpoint-deprecated( "<660px" ) {
+		margin: 0 16px;
 	}
 }
 
@@ -92,6 +95,10 @@
 	.button.header-cake__back {
 		padding: 0;
 	}
+
+	@include breakpoint-deprecated( "<660px" ) {
+		margin: 16px;
+	}
 }
 
 .is-reader-page .main .tag-stream__empty-content {