[NOX in LYS] Improve responsive design for mobile and tablet #58973
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📝 WalkthroughWalkthroughThese changes implement comprehensive mobile support for the "Launch Your Store" hub in the WooCommerce admin client. Enhancements include explicit mobile sidebar state management, new mobile header and toggle components, prop and type extensions for sidebar components, integration of mobile headers into the sidebar state machine, and extensive responsive CSS adjustments. A new hook is added to extract mobile header components from XState services. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MobileHeader
participant SidebarToggle
participant LaunchStoreController
participant SidebarStateMachine
participant SidebarContainer
User->>MobileHeader: Clicks sidebar toggle
MobileHeader->>LaunchStoreController: onToggle()
LaunchStoreController->>SidebarStateMachine: Update sidebar state
SidebarStateMachine-->>LaunchStoreController: State changed
LaunchStoreController->>SidebarContainer: Pass isMobileSidebarOpen, onMobileClose
SidebarContainer->>User: Renders sidebar (open/closed)
User->>SidebarContainer: Clicks close button
SidebarContainer->>LaunchStoreController: onMobileClose()
LaunchStoreController->>SidebarStateMachine: Update sidebar state
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (11)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (2)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-toggle/styles.scss (1)
1-13: Add visible focus styles for keyboard users
.mobile-sidebar-toggleonly changes display properties; it lacks any:focus-visibleoutline/box-shadow. Without it, keyboard navigation on mobile/desktop won’t show where focus sits.Consider:
.mobile-sidebar-toggle:focus-visible { outline: 2px solid $blue-50; // or token in design system outline-offset: 2px; }plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss (1)
18-18: Consideroverscroll-behavior: containto prevent scroll chainingIf the inner canvas scrolls, momentum scrolling can bubble to the page causing jank. Adding:
overflow-y: auto; overscroll-behavior: contain;to
&__canvasisolates the scroll context.
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
plugins/woocommerce/client/admin/client/launch-your-store/hub/index.tsx(5 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/style.scss(4 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss(2 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/site-preview.scss(3 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx(1 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-header.tsx(1 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-toggle/index.tsx(1 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-toggle/styles.scss(1 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-mobile-header.tsx(1 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsx(1 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsx(3 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx(8 hunks)plugins/woocommerce/client/admin/client/launch-your-store/hub/styles.scss(7 hunks)plugins/woocommerce/client/admin/client/utils/xstate/useMobileHeaderFromService.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{php,js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code-quality.mdc)
**/*.{php,js,jsx,ts,tsx}: Guard against unexpected inputs
Sanitize and validate any potentially dangerous inputs
Ensure code is backwards compatible
Write code that is readable and intuitive
Ensure code has unit or E2E tests where applicable
Files:
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-toggle/index.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-mobile-header.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/index.tsxplugins/woocommerce/client/admin/client/utils/xstate/useMobileHeaderFromService.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-header.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx
**/*.{php,js,ts,jsx,tsx}
⚙️ CodeRabbit Configuration File
**/*.{php,js,ts,jsx,tsx}: Don't trust that extension developers will follow the best practices, make sure the code:
- Guards against unexpected inputs.
- Sanitizes and validates any potentially dangerous inputs.
- Is backwards compatible.
- Is readable and intuitive.
- Has unit or E2E tests where applicable.
Files:
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-toggle/index.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-mobile-header.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/index.tsxplugins/woocommerce/client/admin/client/utils/xstate/useMobileHeaderFromService.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-header.tsxplugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx
🧬 Code Graph Analysis (4)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsx (1)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx (1)
SidebarContainer(746-760)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-mobile-header.tsx (4)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx (1)
SidebarComponentProps(67-72)plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/data/onboarding-context.tsx (1)
useOnboardingContext(98-98)plugins/woocommerce/client/admin/client/settings-payments/utils.ts (1)
recordPaymentsOnboardingEvent(424-450)plugins/woocommerce/client/admin/client/settings-payments/constants.ts (1)
wooPaymentsOnboardingSessionEntryLYS(8-8)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-header.tsx (1)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx (1)
SidebarComponentProps(67-72)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx (2)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-header.tsx (1)
LaunchStoreHubMobileHeader(14-36)plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-mobile-header.tsx (1)
PaymentsMobileHeader(17-65)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Core e2e tests 2/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: JavaScript - @woocommerce/admin-library [unit]
- GitHub Check: Core e2e tests 1/6 - @woocommerce/plugin-woocommerce [e2e]
- GitHub Check: build
🔇 Additional comments (13)
plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx (1)
107-110: VerifySidebarContainerinterface now includesonMobileCloseThis file forwards a new
onMobileCloseprop. Double-check thatSidebarContainer’s prop types and implementation were updated; otherwise TypeScript will flag an error and the callback will be silently dropped.plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-sidebar.tsx (1)
149-152: Ensure consistency of the new mobile close propSame concern as above: confirm
SidebarContainerhandlesonMobileCloseand that callbacks passed from higher layers are correctly wired through here.plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss (1)
7-9: Watch for double-scrollbars on small screensHiding horizontal overflow while leaving vertical scroll on the parent and inside
&__canvas(overflow-y: autoat L18) can result in nested scroll areas, a common UX pain point on mobile. Verify on actual devices that only one vertical scrollbar is active.plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/site-preview.scss (3)
74-77: Looks good – responsive radius tweak only.
91-94: LGTM – aligns loading overlay radius with iframe.
107-111: Padding/offset fix is sensible for ≤ 782 px.plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/style.scss (4)
15-18: Viewport-width override is fine.
28-34: Good call preventing horizontal scroll on mobile.
75-83: Padding adjustment keeps header aligned – looks good.
92-95: Reduced inner padding for small screens – OK.plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/xstate.tsx (1)
69-72: MakeonToggleoptional or provide a default
onToggleswitched from absent to mandatory. Unless every existing component already passes it, this is a breaking type/API change. Either:
- keep it optional and fall back to a no-op, or
- provide a default implementation when creating the props object.
Failing to do so will cause TS errors or runtime
undefinedchecks everywhere.plugins/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/payments-mobile-header.tsx (1)
55-61: Update template variables after index fixAfter correcting
currentStepIndex,sprintfwill now receive the proper human-friendly value. No other changes needed here.plugins/woocommerce/client/admin/client/launch-your-store/hub/styles.scss (1)
412-451: Mobile header styles look solidNew rules provide sensible typography, spacing, and flex layout. No issues spotted.
plugins/woocommerce/client/admin/client/launch-your-store/hub/index.tsx
Outdated
Show resolved
Hide resolved
...s/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-header.tsx
Outdated
Show resolved
Hide resolved
...ommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-toggle/index.tsx
Outdated
Show resolved
Hide resolved
...erce/client/admin/client/launch-your-store/hub/sidebar/components/payments-mobile-header.tsx
Outdated
Show resolved
Hide resolved
...ocommerce/client/admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsx
Outdated
Show resolved
Hide resolved
plugins/woocommerce/client/admin/client/utils/xstate/useMobileHeaderFromService.tsx
Outdated
Show resolved
Hide resolved
|
Size Change: -5.74 kB (-0.1%) Total Size: 5.92 MB
|
Test using WordPress PlaygroundThe changes in this pull request can be previewed and tested using a WordPress Playground instance. Test this pull request with WordPress Playground. Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit. |
Testing GuidelinesHi @orcungogus @woocommerce/moltres, Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed. Reminder: PR reviewers are required to document testing performed. This includes:
|
vladolaru
approved these changes
Jul 28, 2025
...s/woocommerce/client/admin/client/launch-your-store/hub/sidebar/components/mobile-header.tsx
Outdated
Show resolved
Hide resolved
…sidebar/components/mobile-header.tsx Co-authored-by: Vlad Olaru <vlad.olaru@automattic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Submission Review Guidelines:
Changes proposed in this Pull Request:
This PR focuses on improving the mobile and tablet experience for the NOX integration in the “Launch Your Store” (LYS) flow.
Figma design: xO8YdpKfaVoP2d8NvweZ5I-fi-8447_179415
Closes WOOPLUG-4692
Screenshots or screen recordings:
How to test the changes in this Pull Request:
Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:
Testing that has already taken place:
Check above.
Changelog entry
Changelog Entry Details
Significance
Type
Message
Changelog Entry Comment
Comment