Domains: Fix discrepancy between onboarding and domain-only search

client/components/domains/register-domain-step/style.scss

@@ -374,3 +374,8 @@ body.is-section-signup {
 	border-right: none;
 	border-left: none;
 }
+
+body {
+	text-rendering: optimizelegibility;
+	-webkit-font-smoothing: antialiased;
+}

client/signup/steps/domains/index.jsx

@@ -11,6 +11,7 @@ import {
 	Step,
 } from '@automattic/onboarding';
 import { withShoppingCart } from '@automattic/shopping-cart';
+import { subscribeIsWithinBreakpoint, isWithinBreakpoint } from '@automattic/viewport';
 import { getQueryArg } from '@wordpress/url';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
@@ -171,6 +172,7 @@ export class RenderDomainsStep extends Component {
 			checkDomainAvailabilityPromises: [],
 			removeDomainTimeout: 0,
 			addDomainTimeout: 0,
+			isDesktopViewport: false,
 		};
 	}
 
@@ -187,6 +189,7 @@ export class RenderDomainsStep extends Component {
 			// This call is expensive, so we only do it if the mini-cart hasDomainRegistration.
 			this.props.shoppingCartManager.addProductsToCart( [ this.props.multiDomainDefaultPlan ] );
 		}
+		this.subscribeToViewPortChanges();
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -202,6 +205,20 @@ export class RenderDomainsStep extends Component {
 		}
 	}
 
+	subscribeToViewPortChanges() {
+		this.unsubscribeToViewPortChanges = subscribeIsWithinBreakpoint(
+			'>=960px',
+			( isDesktopViewport ) => this.setState( { isDesktopViewport } )
+		);
+		if ( isWithinBreakpoint( '>=960px' ) ) {
+			this.setState( { isDesktopViewport: true } );
+		}
+	}
+
+	componentWillUnmount() {
+		this.unsubscribeToViewPortChanges?.();
+	}
+
 	getLocale() {
 		return ! this.props.userLoggedIn ? this.props.locale : '';
 	}
@@ -1444,6 +1461,7 @@ export class RenderDomainsStep extends Component {
 
 			return (
 				<Step.TwoColumnLayout
+					isLargeViewport={ this.state.isDesktopViewport }
 					firstColumnWidth={ 7 }
 					secondColumnWidth={ 3 }
 					topBar={ <Step.TopBar backButton={ ! hideBack && backButton } /> }

client/signup/steps/domains/style.scss

@@ -1,6 +1,7 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 @import "@wordpress/base-styles/variables";
+@import "@wordpress/base-styles/colors.native";
 
 .domains__step-section-wrapper {
 	margin: 0 auto;
@@ -519,22 +520,59 @@ body.is-section-signup {
 .step-route.onboarding.domains:has(.step-container-v2) {
 	padding: 0;
 
-	.register-domain-step__search-card {
-		margin: 0;
+	.register-domain-step {
+		&__search-card {
+			@media (min-width: 600px) {
+				margin: 20px 20px 0;
+			}
+
+			@media (min-width: 960px) {
+				margin: 0;
+			}
+		}
+
+		&__domain-side-content-container-domain-explanation-image {
+			max-width: 100%;
+			margin-bottom: 0;
+		}
+
+		&__example-prompt {
+			margin: 0;
+
+			@media (min-width: 600px) {
+				margin: 0 20px;
+			}
+		}
 	}
 
 	.featured-domain-suggestions,
 	.domain-suggestion {
 		margin-inline: 0;
-	}
 
-	.register-domain-step__domain-side-content-container-domain-explanation-image {
-		max-width: 100%;
-		margin-bottom: 0;
+		@media (min-width: 600px) {
+			margin-inline: 20px;
+
+			@media (min-width: 960px) {
+				margin: 0;
+			}
+		}
 	}
 
-	.register-domain-step__example-prompt {
-		margin: 0;
+	.featured-domain-suggestions {
+		border-top: none;
+
+		@media (min-width: 600px) {
+			margin: 0 20px;
+
+			@media (min-width: 960px) {
+				margin: 0;
+			}
+		}
+
+		.featured-domain-suggestion {
+			margin: 0;
+			margin-bottom: 12px;
+		}
 	}
 
 	.domains__domain-side-content-container {
@@ -550,9 +588,119 @@ body.is-section-signup {
 		@include break-medium {
 			max-width: 290px;
 		}
+
+		@include break-large {
+			margin-left: 40px;
+		}
+
+		@include break-huge {
+			margin-left: 60px;
+		}
+
+		&.fade-out {
+			display: none;
+		}
 	}
 
-	.domains__domain-side-content.fade-out {
-		display: none;
+	.step-container-v2__heading {
+		h1:not(.small) {
+			letter-spacing: -0.4px;
+			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+			line-height: 1.2em;
+		}
+
+		> p {
+			color: $gray-60;
+			font-size: 1rem;
+		}
+	}
+}
+
+.step-container-v2 {
+	&__content.step-container-v2__content--two-column-layout.domains__step-content.domains__step-content-domain-step {
+		column-gap: 0;
+		max-width: 1280px;
+	}
+
+	&__content-wrapper.padding {
+		padding: 0 12px;
+		gap: 0;
+	}
+
+	&__heading {
+		margin-top: 0;
+	}
+}
+
+.domains__step-content-domain-step > div {
+	&:nth-child(1) {
+		flex: 1 !important;
+	}
+
+	&:nth-child(2) {
+		display: flex;
+		flex-basis: auto !important;
+		flex-direction: column;
+		flex-grow: 0 !important;
+		flex-shrink: 1 !important;
+		flex-wrap: nowrap;
+	}
+}
+
+.domain-product-price {
+	&.domain-product-single-price.domain-product-price__domain-step-signup-flow {
+		align-self: center;
+	}
+
+	@include breakpoint-deprecated( "<660px" ) {
+		&.domain-product-price__domain-step-signup-flow {
+			flex-direction: column;
+		}
+	}
+}
+
+.domain-suggestion__content.domain-suggestion__content-domain {
+	align-items: unset;
+}
+
+body.is-section-stepper {
+	.featured-domain-suggestion.card .domain-product-price {
+		align-items: flex-start;
+		margin-top: 12px;
+	}
+
+	.formatted-header .formatted-header__title {
+		@media (min-width: 1080px) {
+			font-size: 2.75rem !important;
+		}
+	}
+
+	.register-domain-step__search.register-domain-step__search-domain-step:not(.is-sticky) {
+		@media (min-width: 661px) {
+			padding-top: 18px;
+		}
+	}
+
+	.onboarding:not(.is-onboarding-2023-pricing-grid) .step-container-v2__heading {
+		margin: calc(48px + 24px - var(--step-container-v2-top-bar-height)) 20px 24px 20px;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		width: unset;
+		align-items: center;
+		flex-direction: column;
+
+		@media (min-width: 960px) {
+			margin-top: calc(48px + 48px - var(--step-container-v2-top-bar-height));
+			margin-bottom: 36px;
+		}
+
+		> h1 {
+			font-size: 2.25rem;
+
+			@media (min-width: 1080px) {
+				font-size: 2.75rem;
+			}
+		}
 	}
 }