Fixed plan selector alignment and plan blocks size on tablet screen sizes #101994

paulopmt1 · 2025-03-27T18:31:37Z

Related to #101964
Slack thread: p1743085286744789-slack-C04H4NY6STW

Proposed Changes

Set plan duration selector full width for mobile and tablet resolutions
Increase one plan block for tablet resolutions
Left align subtitle on StepContainerV2 mobile resolution

Before	Header

Testing Instructions

Go to /setup/onboarding (locally or use the feature flag ?flags=onboarding/step-container-v2 on staging)
Add a paid domain to your cart and advance to the plans page

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
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)?

…sizes (tablet)

github-actions · 2025-03-27T18:31:50Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-03-27T18:32:46Z

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

Sections (~1 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
plugins                         +80 B  (+0.0%)       +1 B  (+0.0%)
plans                           +80 B  (+0.0%)       +1 B  (+0.0%)
jetpack-app                     +80 B  (+0.0%)       +1 B  (+0.0%)
async-step-unified-plans        +80 B  (+0.0%)       +1 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 (~1 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected        +80 B  (+0.0%)       +1 B  (+0.0%)
async-load-signup-steps-plans                          +80 B  (+0.0%)       +1 B  (+0.0%)

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.

zaguiini · 2025-03-27T18:39:09Z

packages/plans-grid-next/src/components/features-grid/index.tsx

@@ -404,7 +404,7 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		}

 		// we want to fit 3 plans per row in this breakpoint
-		const mediumBreakpoint = isInSiteDashboard ? 667 : 741;
+		const mediumBreakpoint = 669;


What's the reason behind this change? If we want to customize this further, then we'll likely need a prop, otherwise it will break other pages, no?

What's the reason behind this change?

We want to match the breakpoint with the max-width break-small defined here.
So that will generate this behavior:

Screen.Recording.2025-03-27.at.16.52.07.mov

Without setting it, we'll have this weird behavior where a single plan is shown after the break-small:

Screen.Recording.2025-03-27.at.16.53.31.mov

If we want to customize this further, then we'll likely need a prop

The original value was introduced here.

I don't think we want to keep customizing it since it's hard-coded to this screen. @fushar can you confirm that?

otherwise it will break other pages, no?

I tested that feature locally (which has the flag isInSiteDashboard true) to ensure the value chance of 2px (before was 667) wouldn't change their behavior, and it looks good.

I also tested other flows where we show the plans screen, like /plans, and the new change (669 instead 741) looks good as well.

It looks good on my end, too! Yeah, it would be good to have a single value here.

Cool 👍🏻

zaguiini · 2025-03-27T18:39:49Z

client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/style.scss

-	.plans-wrapper {
-		margin: 0;
-		padding: 0;
+.step-container-v2 {


Why did we need this change? Specificity? Can we do it without? I don't like the idea of targeting step-container-v2 directly.

Good question. The .step-container-v2--plans selector won't allow us to update the subtitle, so for that we need to start on a parent element. That's why I used the .step-container-v2.

We could implement it outside of the current CSS, something like this:

But it feels more organized to keep everything inside the same parent, since all these changes are specific for the new step container .step-container-v2.

I don't like the idea of targeting step-container-v2 directly.

Interesting, can you elaborate more on why?

I think @zaguiini concern is that by making the inner contents tightly coupled to the step container can lead to unintended style inheritance in other components of the step container and cause unintended side-effects.
I think having outside as it's own class is the safer approach.

Well this is fine. It's going to be reworked anyway. Let's move forward.

matticbot · 2025-03-27T18:43:07Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/plan-selection-alinment-tablet on your sandbox.

autumnfjeld · 2025-03-28T02:51:16Z

Not sure if this PR is final not, but did a few smoke tests, did not find any problems.

https://www.awesomescreenshot.com/video/38132998?key=91a00235af747350ae7f23d329da2b6c

vykes-mac · 2025-03-28T02:51:36Z

@paulopmt1 Tested this and it looks good!

Fixed plan selector alignmment and plan blocks size on medium screen …

5086437

…sizes (tablet)

paulopmt1 requested a review from a team as a code owner March 27, 2025 18:31

paulopmt1 requested a review from oswian March 27, 2025 18:31

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 27, 2025

paulopmt1 linked an issue Mar 27, 2025 that may be closed by this pull request

Onboarding style consistency: Improve mobile plan alignments #101964

Closed

paulopmt1 requested a review from a team March 27, 2025 18:33

zaguiini reviewed Mar 27, 2025

View reviewed changes

paulopmt1 requested a review from fushar March 27, 2025 19:58

paulopmt1 merged commit 70e8464 into trunk Mar 28, 2025
20 of 22 checks passed

paulopmt1 deleted the update/plan-selection-alinment-tablet branch March 28, 2025 13:56

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fixed plan selector alignment and plan blocks size on tablet screen sizes #101994

Fixed plan selector alignment and plan blocks size on tablet screen sizes #101994

Uh oh!

paulopmt1 commented Mar 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented Mar 27, 2025

Uh oh!

zaguiini Mar 27, 2025

Uh oh!

paulopmt1 Mar 27, 2025 •

edited

Loading

Uh oh!

fushar Mar 28, 2025

Uh oh!

zaguiini Mar 28, 2025

Uh oh!

zaguiini Mar 27, 2025

Uh oh!

paulopmt1 Mar 27, 2025

Uh oh!

vykes-mac Mar 28, 2025

Uh oh!

zaguiini Mar 28, 2025

Uh oh!

matticbot commented Mar 27, 2025

Uh oh!

autumnfjeld commented Mar 28, 2025

Uh oh!

vykes-mac commented Mar 28, 2025

Uh oh!

Uh oh!

Uh oh!

Fixed plan selector alignment and plan blocks size on tablet screen sizes #101994

Fixed plan selector alignment and plan blocks size on tablet screen sizes #101994

Uh oh!

Conversation

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

Uh oh!

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

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

Uh oh!

Uh oh!

matticbot commented Mar 27, 2025

Uh oh!

zaguiini Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fushar Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

zaguiini Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

zaguiini Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

paulopmt1 Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

vykes-mac Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

zaguiini Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

matticbot commented Mar 27, 2025

Uh oh!

autumnfjeld commented Mar 28, 2025

Uh oh!

vykes-mac commented Mar 28, 2025

Uh oh!

Uh oh!

Uh oh!

paulopmt1 commented Mar 27, 2025 •

edited

Loading

github-actions bot commented Mar 27, 2025 •

edited by matticbot

Loading

paulopmt1 Mar 27, 2025 •

edited

Loading