Skip to content

Connectors: Increase right padding of callout for mobile layout#78126

Merged
t-hamano merged 3 commits into
WordPress:trunkfrom
adithya-naik:fix/connectors-increase-callout-mobile-padding-78121
May 13, 2026
Merged

Connectors: Increase right padding of callout for mobile layout#78126
t-hamano merged 3 commits into
WordPress:trunkfrom
adithya-naik:fix/connectors-increase-callout-mobile-padding-78121

Conversation

@adithya-naik

Copy link
Copy Markdown
Contributor

What?

Reduce the right padding of the callout section in the mobile layout on the Connectors page.

Why?

The current 84px right padding causes content to overflow or clip at narrower mobile widths (e.g. 420px–600px). The left padding is intentional (to clear the icon/illustration), but the right side has no such constraint and should use a smaller standard spacing value.

Fixes #78121

@github-actions

github-actions Bot commented May 9, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: adithya-naik <adithyanaik@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@adithya-naik adithya-naik force-pushed the fix/connectors-increase-callout-mobile-padding-78121 branch from 6ad1659 to cf7e580 Compare May 9, 2026 19:25
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Feature] Connectors screen Tracks connectors screen related tasks labels May 11, 2026

@t-hamano t-hamano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, but the percentage values make the situation look worse.

An example with a width of 400px

This PR trunk branch
Image Image

We need to ensure it works on all devices. Could you test the other values?

@adithya-naik

adithya-naik commented May 11, 2026

Copy link
Copy Markdown
Contributor Author

@t-hamano Sure, I make sure the logo visible on all devices, I thought the logo is as bg-image.

One more point to note the logo is out of its div.

@adithya-naik

Copy link
Copy Markdown
Contributor Author
image image image

Hi @t-hamano , please find the attached images. Thanks for pointing it out, I have made the changes accordingly.

@Mayank-Tripathi32

Copy link
Copy Markdown
Member

This looks much better. Did you check for other main breakpoints too?

@adithya-naik

Copy link
Copy Markdown
Contributor Author

This looks much better. Did you check for other main breakpoints too?

Yes @Mayank-Tripathi32, I did.

@adithya-naik adithya-naik requested a review from t-hamano May 13, 2026 04:00

@t-hamano t-hamano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! It works correctly at any viewport width.

Recording.2026-05-13.154233.mp4

@t-hamano t-hamano enabled auto-merge (squash) May 13, 2026 06:43
@t-hamano t-hamano disabled auto-merge May 13, 2026 07:00
@t-hamano t-hamano merged commit 5a65112 into WordPress:trunk May 13, 2026
42 checks passed
@github-project-automation github-project-automation Bot moved this from 🔎 Needs Review to ✅ Done in WordPress 7.0 Editor Tasks May 13, 2026
@github-actions github-actions Bot added this to the Gutenberg 23.2 milestone May 13, 2026
@github-actions github-actions Bot added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels May 13, 2026
gutenbergplugin pushed a commit that referenced this pull request May 13, 2026
* Connectors: Increase right padding of callout for mobile layout

* Connectors: Increase callout mobile padding

Co-authored-by: adithya-naik <adithyanaik@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
@github-actions

Copy link
Copy Markdown

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: a7e69ce

pento pushed a commit to WordPress/wordpress-develop that referenced this pull request May 14, 2026
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`.

The following changes are included:

- [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002)
- Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511)
- feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521)
- Connectors: Avoid using centered text (WordPress/gutenberg#78125)
- Revisions: Add tooltip to diff marker buttons  (WordPress/gutenberg#77690)
- Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160)
- Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140)
- Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671)
- Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117)
- Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126)
- isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201)
- Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243)
- Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217)
- Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230)
- Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186)
- Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156)
- Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286)
- Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273)

A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b.

Log created with:

git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy

See #64595.

git-svn-id: https://develop.svn.wordpress.org/branches/7.0@62360 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request May 14, 2026
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`.

The following changes are included:

- [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002)
- Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511)
- feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521)
- Connectors: Avoid using centered text (WordPress/gutenberg#78125)
- Revisions: Add tooltip to diff marker buttons  (WordPress/gutenberg#77690)
- Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160)
- Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140)
- Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671)
- Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117)
- Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126)
- isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201)
- Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243)
- Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217)
- Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230)
- Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186)
- Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156)
- Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286)
- Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273)

A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b.

Log created with:

git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy

See #64595.
Built from https://develop.svn.wordpress.org/branches/7.0@62360


git-svn-id: http://core.svn.wordpress.org/branches/7.0@61641 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request May 14, 2026
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`.

The following changes are included:

- [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002)
- Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511)
- feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521)
- Connectors: Avoid using centered text (WordPress/gutenberg#78125)
- Revisions: Add tooltip to diff marker buttons  (WordPress/gutenberg#77690)
- Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160)
- Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140)
- Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671)
- Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117)
- Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126)
- isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201)
- Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243)
- Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217)
- Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230)
- Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186)
- Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156)
- Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286)
- Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273)

A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b.

Log created with:

`git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy`

Reviewed by desrosj.
Merges [62360] to `trunk`.

See #64595.

git-svn-id: https://develop.svn.wordpress.org/trunk@62361 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request May 14, 2026
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`.

The following changes are included:

- [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002)
- Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511)
- feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521)
- Connectors: Avoid using centered text (WordPress/gutenberg#78125)
- Revisions: Add tooltip to diff marker buttons  (WordPress/gutenberg#77690)
- Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160)
- Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140)
- Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671)
- Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117)
- Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126)
- isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201)
- Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243)
- Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217)
- Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230)
- Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186)
- Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156)
- Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286)
- Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273)

A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b.

Log created with:

`git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy`

Reviewed by desrosj.
Merges [62360] to `trunk`.

See #64595.
Built from https://develop.svn.wordpress.org/trunk@62361


git-svn-id: http://core.svn.wordpress.org/trunk@61642 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core [Feature] Connectors screen Tracks connectors screen related tasks [Type] Bug An existing feature does not function as intended

Projects

Development

Successfully merging this pull request may close these issues.

Connectors: Increase the right padding of the callout section for the mobile layout

3 participants