Skip to content

Sync Modal: improve layout and spacing for better fit on smaller screens #105109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

katinthehatsite
Copy link
Contributor

@katinthehatsite katinthehatsite commented Aug 7, 2025

Closes DOTCOM-14140

Proposed Changes

This PR reduces spacing around the Sync modal to make the items a bit more compact and smaller screen friendly.

Before

Screenshot 2025-08-07 at 3 15 49 PM

After

Screenshot 2025-08-07 at 3 15 26 PM

Observe that we have no scrollbar here and all the content fits when you open at least the first set of options.

Testing Instructions

  • Pull the changes from this branch or use the Calypso Live link below
  • Ensure that you have an Atomi site and a staging site
  • Navigate to /staging-site/{yourAtomicSite}
  • Click on the Sync button to open the sync modal
  • Observe the spacing in the modal

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? 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)?

@katinthehatsite katinthehatsite self-assigned this Aug 7, 2025
@katinthehatsite katinthehatsite marked this pull request as draft August 7, 2025 13:02
Copy link

github-actions bot commented Aug 7, 2025

@matticbot
Copy link
Contributor

matticbot commented Aug 7, 2025

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

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

  • help-center
  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/update-styles-on-modal on your sandbox.

@matticbot
Copy link
Contributor

matticbot commented Aug 7, 2025

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

Async-loaded Components (~8 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
async-load-staging-site-sync-modal        -77 B  (-0.0%)       -8 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.

@katinthehatsite
Copy link
Contributor Author

@epeicher @ndiego Please give it a test and let me know what you think, we can make further modifications. I see that we do not have any design input on this but I think we can move with small tweaks forward on our end.

@epeicher
Copy link
Contributor

epeicher commented Aug 7, 2025

I think this needs designer eyes @Marinatsu 👀 . I have tested it and the scroll starts at around 750px height:

Before After
~ 750px height CleanShot 2025-08-07 at 18 09 16@2x CleanShot 2025-08-07 at 18 08 59@2x
~1220px height CleanShot 2025-08-07 at 18 09 41@2x CleanShot 2025-08-07 at 18 10 00@2x

@katinthehatsite
Copy link
Contributor Author

Thanks for testing @epeicher ! I asked for the design feedback in p1754640213303199-slack-C04GESRBWKW .
Let's hope we can get further guidance and proceed from there.

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.

3 participants