My Jetpack: Onboarding i3 | Fix layout on wider screens by manzoorwanijk · Pull Request #43699 · Automattic/jetpack

manzoorwanijk · 2025-05-30T10:45:13Z

We need to set the max width for My Jetpack and also make the whole UI center-aligned on wider screens

Supercedes #43696

Proposed changes:

Create a FullWidthSeparator component to reuse it everywhere.
Set the max width for the tab panel and center align it

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Go to My Jetpack on a wider screen
Confirm that the layout is center aligned
Confirm that the tab and footer separators work fine

github-actions · 2025-05-30T10:46:13Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
🔴 Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

🔴 Action required: Please add missing changelog entries for the following projects: projects/packages/my-jetpack

Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

github-actions · 2025-05-30T10:46:17Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/my-jetpack/i3-layout-on-large-screens branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/my-jetpack/i3-layout-on-large-screens

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

jp-launch-control · 2025-05-30T10:58:14Z

Code Coverage Summary

No summary data is available for parent commit 42a29e6, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 42a29e6 is available.

Full summary · PHP report · JS report

gmjuhasz

Works well! I'm a bit lost with which PR does what, but I did notice that the help page looks a bit cramped here:

manzoorwanijk · 2025-05-30T11:17:43Z

I'm a bit lost with which PR does what, but I did notice that the help page looks a bit cramped here

That CTA is fixed in #43697

* Init * My Jetpack: Onboarding i3 - Initialize tab panel (#43595) * My Jetpack: Onboarding i3 - Init tab panel * Improve types and use constants and extractions * Add changelog to make CI happy * Create a shared tab content wrapper to share styling * Use "section" instead of tabs * Rename tab components to content components * Use correct headings * Decrease margins on smaller screens * Fix initial tab changed manually * My Jetpack: Onboarding i3 | Split the overview tab (#43632) * My Jetpack: Onboarding i3 | Split the overview tab * Fix separator position * My Jetpack: Onboarding i3 | Add help section (#43638) * My Jetpack: Onboarding i3 | Update help section * Remove double parenthesis * Thank you copilot * My Jetpack: Updating Products tab. (#43652) * Moving unowned products to the Products tab * Products tab header and spacing update * Moving owned and unowned products into a hook * changelog * Update projects/packages/my-jetpack/_inc/components/product-cards-section/style.module.scss RTL aware alternative Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> * Update projects/packages/my-jetpack/_inc/components/product-cards-section/style.module.scss RTL aware alternative Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> --------- Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> * My Jetpack: Tab filtering for admin role (#43675) * My Jetpack: Tab fitering for admin role * changelog * replacing permission check * My Jetpack: Onboarding i3 | Move Plan and Connection section to Overview tab (#43681) * My Jetpack: Onboarding i3 | Move Plan and Connection section to Overview tab * Remove unused styles * Fix unit tests * Fix E2E tests * Add changelog * Fix top border for the plan and connection section * Fix E2E test heading * Update E2E test string * Update connection owner message when author is not connected * Fix typo in changelog, thanks to copilot review. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix connection block for JN sites * Move Jetpack Manage upsell banner to Overview * Update banner messaging --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * My Jetpack: Onboarding i3 | Fix layout on wider screens (#43699) * My Jetpack: Update upsell banner for Automattic for Agencies (#43697) * Update Jetpack Manage banner to A4A * Fix Help section CTA styling * Remove redundant changelogs * Updating Products tab visibility based on owned products (#43720) * Remove repeated changelog * My Jetpack: Onboarding i3 | Update Products tab description copy (#43724) * Add tracks events for My Jetpack Tab Navigation (#43703) * Add jetpack_myjetpack_tab_click, jetpack_myjetpack_page_view (enhance), jetpack_myjetpack_help_request events * Merge and resolve conflict in my-jetpack-tab-panel/index.tsx Combined functionality from both branches: - Analytics tracking and session duration from HEAD - Product filtering logic from feature/my-jetpack/onboarding-i3 - Maintained all imports and hooks from both versions - Preserved the analytics event tracking while adding dynamic tab visibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Improve source tab definition on help tracking hook --------- Co-authored-by: Claude <noreply@anthropic.com> * My jetpack: Onboarding i3 | Fix layout and alignment issues (#43725) * Fix horizontal scrollable space * Fix Jetpack log and tabs aligment issues * Add changelog * OK Copilot * My Jetpack: Replace deprecated sass APIs with alternatives (#43726) --------- Co-authored-by: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Robert Sreberski <robertsreberski@gmail.com> Co-authored-by: Claude <noreply@anthropic.com>

My Jetpack: Onboarding i3 | Fix layout on wider screens

14b84a3

manzoorwanijk self-assigned this May 30, 2025

manzoorwanijk added [Type] Bug When a feature is broken and / or not performing as intended [Status] Needs Team Review Obsolete. Use Needs Review instead. labels May 30, 2025

github-actions bot added [Package] My Jetpack [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels May 30, 2025

gmjuhasz approved these changes May 30, 2025

View reviewed changes

manzoorwanijk merged commit a80e01c into feature/my-jetpack/onboarding-i3 May 30, 2025
78 of 80 checks passed

manzoorwanijk deleted the fix/my-jetpack/i3-layout-on-large-screens branch May 30, 2025 11:17

manzoorwanijk mentioned this pull request May 30, 2025

My Jetpack: Updating page horizontal tab position #43696

Closed

3 tasks

github-actions bot removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. [Status] Needs Team Review Obsolete. Use Needs Review instead. labels May 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My Jetpack: Onboarding i3 | Fix layout on wider screens#43699

My Jetpack: Onboarding i3 | Fix layout on wider screens#43699
manzoorwanijk merged 1 commit intofeature/my-jetpack/onboarding-i3from
fix/my-jetpack/i3-layout-on-large-screens

manzoorwanijk commented May 30, 2025

Uh oh!

github-actions bot commented May 30, 2025

Uh oh!

github-actions bot commented May 30, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented May 30, 2025

Uh oh!

gmjuhasz left a comment

Uh oh!

manzoorwanijk commented May 30, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

manzoorwanijk commented May 30, 2025

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Uh oh!

github-actions bot commented May 30, 2025

Uh oh!

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

Uh oh!

Uh oh!

jp-launch-control bot commented May 30, 2025

Code Coverage Summary

Uh oh!

gmjuhasz left a comment

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk commented May 30, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented May 30, 2025 •

edited

Loading