Domains: Fix discrepancy between onboarding and domain-only search #102021

rafaelgallani · 2025-03-28T00:36:03Z

Related to https://linear.app/a8c/issue/NOMADO-28/fix-discrepancy-between-onboarding-and-domain-only-search.

Proposed Changes

Fix the visual discrepancies between the domain-only flow and the onboarding domain flows.
Also, there are some minor tweaks to the domain-only flow style (mainly anti-aliasing for the font family in the entire flow).

Preview

Before

Screen.Recording.2025-03-28.at.00.44.10.mov

After

Screen.Recording.2025-03-28.at.00.42.26.mov

Minor tweaks

Where	Before	After
TLD filter
Prompt tooltip
Focused search input

Why are these changes being made?

So we can continue our work in the domain of UX with a synchronized state between both flows.

Testing Instructions

The easiest way I could find to test this is to keep both onboarding and domain-only flow tabs open and switch between them while changing the browser's window width, ensuring both look identical.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2) (not quite, but still)
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-03-28T00:36:16Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-03-28T00:41:13Z

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

Sections (~106 bytes added 📈 [gzipped])

name                        parsed_size           gzip_size
async-step-unified-domains       +343 B  (+0.0%)     +106 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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

name                             parsed_size           gzip_size
async-load-signup-steps-domains       +343 B  (+0.1%)     +106 B  (+0.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.

rafaelgallani · 2025-03-28T02:42:43Z

client/signup/steps/domains/style.scss

+			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+			line-height: 1.2em;


wp-calypso/client/components/formatted-header/style.scss

Lines 110 to 111 in 7800534

/* stylelint-disable-next-line declaration-property-unit-allowed-list */

line-height: 1.2em;

Since we're replicating this referenced style in here, we need to disable the rule as well too.

rafaelgallani · 2025-03-28T02:44:50Z

client/signup/steps/domains/style.scss

+		flex-direction: column;
+
+		@media (min-width: 960px) {
+			margin-top: calc(48px + 48px - var(--step-container-v2-top-bar-height));


This is calculated based on the domain-only component - its margins/paddings are used to determine which should be the top here, along with the variable from the height of the different bar used in this flow.

rafaelgallani · 2025-03-28T02:45:20Z

client/signup/steps/domains/style.scss

+	}
+
+	.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;


Same as here - but a different viewport/media query, thus a different calculated value.

gius80

LGTM! Thanks for the fix!
I only noticed a minor discrepancy, see images below.

rafaelgallani · 2025-03-31T22:47:08Z

LGTM! Thanks for the fix! I only noticed a minor discrepancy, see images below.

@gius80 Wow. That's a very good catch + pair of eyes 😬

I've also added a few other minor adjustments to the description (here).

I'll deploy this one tomorrow. Thanks for the review!

…utomattic#102021) * Fix smaller viewport * Add more alignment fixes * Many more fixes * More fixes * Manage large viewport from parent component * Restrict search bar fix to onboarding * Fix wrong gap prop * Fix smaller viewports * Fix different price order * Fix wrong margin for desktop breakpoint * Fix small bug to load initial viewport * Organize styles + general cleanup * AI take on cleanup/simplifying the style * Fix bottom style for explanation image in smaller viewports * Add balance to text-wrap to avoid orphan words in last line * Move anti-aliasing to a more suitable location * Sync example prompt styles * Fix search element weird border radius * Remove outdated style... (2019... 🥶)

rafaelgallani added 10 commits March 27, 2025 16:24

Fix smaller viewport

d60a5c1

Add more alignment fixes

ee8cd45

Many more fixes

7407629

More fixes

bd58718

Manage large viewport from parent component

64d1ab9

Restrict search bar fix to onboarding

156dc84

Fix wrong gap prop

637dbb4

Fix smaller viewports

6a02845

Fix different price order

7f93736

Fix wrong margin for desktop breakpoint

242557e

rafaelgallani added 3 commits March 27, 2025 23:23

Fix small bug to load initial viewport

5a340fb

Organize styles + general cleanup

c50e337

AI take on cleanup/simplifying the style

1739d61

rafaelgallani commented Mar 28, 2025

View reviewed changes

Fix bottom style for explanation image in smaller viewports

a28071e

rafaelgallani marked this pull request as ready for review March 28, 2025 03:46

rafaelgallani added 2 commits March 28, 2025 00:46

Add balance to text-wrap to avoid orphan words in last line

d219a88

Move anti-aliasing to a more suitable location

02dff5d

gius80 approved these changes Mar 31, 2025

View reviewed changes

rafaelgallani added 3 commits March 31, 2025 19:15

Sync example prompt styles

ca33aaf

Fix search element weird border radius

81c8a5c

Remove outdated style... (2019... 🥶)

d465f55

rafaelgallani merged commit 65fc7ea into trunk Apr 1, 2025
15 of 16 checks passed

rafaelgallani deleted the fix/sync-styles-for-domain-flows branch April 1, 2025 19:47

rafaelgallani mentioned this pull request Apr 1, 2025

Domains: Fix discrepancy between onboarding and domain-only search - take 2 #102308

Closed

8 tasks

zaguiini mentioned this pull request Apr 2, 2025

Revert "Domains: Fix discrepancy between onboarding and domain-only search" #102341

Merged

zaguiini mentioned this pull request Apr 15, 2025

Domain only flow: Make it more consistent #102613

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Domains: Fix discrepancy between onboarding and domain-only search #102021

Domains: Fix discrepancy between onboarding and domain-only search #102021

Uh oh!

rafaelgallani commented Mar 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 28, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented Mar 28, 2025 •

edited

Loading

Uh oh!

rafaelgallani Mar 28, 2025

Uh oh!

rafaelgallani Mar 28, 2025

Uh oh!

rafaelgallani Mar 28, 2025

Uh oh!

gius80 left a comment

Uh oh!

rafaelgallani commented Mar 31, 2025

Uh oh!

Uh oh!

Uh oh!

		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		line-height: 1.2em;

Domains: Fix discrepancy between onboarding and domain-only search #102021

Domains: Fix discrepancy between onboarding and domain-only search #102021

Uh oh!

Conversation

rafaelgallani commented Mar 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Preview

Before

After

Minor tweaks

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Mar 28, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Mar 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rafaelgallani Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

rafaelgallani Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

rafaelgallani Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

gius80 left a comment

Choose a reason for hiding this comment

Uh oh!

rafaelgallani commented Mar 31, 2025

Uh oh!

Uh oh!

Uh oh!

rafaelgallani commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited by matticbot

Loading

matticbot commented Mar 28, 2025 •

edited

Loading