Skip to content

Subscribers: fix layout gap and add SidebarNavigation on JP Cloud#109971

Open
CGastrell wants to merge 1 commit intotrunkfrom
try/subscribers-layout-normalization
Open

Subscribers: fix layout gap and add SidebarNavigation on JP Cloud#109971
CGastrell wants to merge 1 commit intotrunkfrom
try/subscribers-layout-normalization

Conversation

@CGastrell
Copy link
Copy Markdown
Contributor

@CGastrell CGastrell commented Apr 13, 2026

Part of JETPACK-1513

Proposed Changes

  • Remove extra padding on .layout__content that created a visible gap around the Subscribers DataViews table. Simplify padding to match the masterbar/sidebar boundaries directly.
  • Switch <Main> from wideLayout to fullWidthLayout so the page fills the content area.
  • Add <SidebarNavigation /> on JP Cloud so mobile users have the hamburger menu to navigate away (was missing — same navigation trap as Earn/Social).
  • Replace hardcoded 62px padding-top in the sidebar focus-content rule with var(--masterbar-height, 62px) for consistency.

Why are these changes being made?

The Subscribers page on Calypso had a visible gap between the content area and the sidebar/masterbar boundaries, caused by extra padding in .layout__content. This was inconsistent with other Jetpack admin pages that sit flush against the layout edges.

On JP Cloud mobile, the Subscribers page was missing <SidebarNavigation /> — the same navigation trap we fixed on Earn and Social in #109899. Without the hamburger menu, users had no way to navigate away from the page on mobile.

Testing Instructions

Calypso (WP.com):

  • Navigate to /subscribers/<site-slug>
  • Verify content sits flush against sidebar and masterbar (no extra gap/padding)
  • Verify the DataViews table fills the available viewport height
  • On mobile viewport: verify the page works correctly without sidebar

JP Cloud:

  • Navigate to /subscribers/<site-slug> on cloud.jetpack.com
  • Desktop: verify same flush layout
  • Mobile: verify hamburger menu is present (was missing before)

Before / after

Calypso Desktop — gap removed

Before After
before-calypso-desktop-subscribers after-calypso-desktop-subscribers
calypso-desktop-before calypso-desktop-after

Content now sits flush against sidebar and masterbar. No extra padding gap.

Calypso Mobile

Before After
before-calypso-mobile-subscribers after-calypso-mobile-subscribers
calypso-mobile-before calypso-mobile-after

JP Cloud Desktop

Before After
before-jpc-desktop-subscribers after-jpc-desktop-subscribers
jpc-desktop-before jpc-desktop-after

JP Cloud Mobile — navigation trap fixed

Before After
before-jpc-mobile-subscribers after-jpc-mobile-subscribers
jpc-mobile-before jpc-mobile-after

Before: no hamburger menu, no way to navigate out. After: hamburger + site title present.

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 tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations?
  • 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)?
  • 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)?

Remove extra padding on .layout__content that created a visible gap
around the Subscribers DataViews table. Simplify padding to match
the masterbar/sidebar boundaries directly.

Switch <Main> from wideLayout to fullWidthLayout so the page fills
the content area. Add <SidebarNavigation /> on JP Cloud so mobile
users have the hamburger menu to navigate away.

Also replace the hardcoded 62px padding-top in the sidebar focus-content
rule with var(--masterbar-height, 62px) for consistency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@matticbot
Copy link
Copy Markdown
Contributor

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

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

  • help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug try/subscribers-layout-normalization on your sandbox.

@CGastrell CGastrell self-assigned this Apr 13, 2026
@CGastrell CGastrell marked this pull request as ready for review April 13, 2026 19:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants