VideoPress: fix Add new video button being clipped on admin dashboard

[alinclamba]

Fixes VIDP-242

Context

Two recent user reports in Zendesk (11192950-zd-a8c, 11201391-zd-a8c). On the legacy VideoPress admin dashboard, the "Add new video" button disappears once videos exist in the library. Got p1778325739637059/1778323869.151139-slack-C02LT75D3 from the VideoPress team for a Bug Blitz fix.

Root cause

At standard viewports, the hero collapses to 1px. The shared .section-hero has overflow: hidden, which in a flex column lets min-height: auto resolve to 0. All shrink pressure from siblings lands on the hero, which clamps to 0 and clips the button.

Recent regression from PR #48244 (base-styles v1.2.0). My Jetpack had a similar regression fixed in PR #48578.

Fix

Wrap each <AdminSectionHero> in a local div with flex-shrink: 0. Shared component untouched, no blast radius on other admin pages using it (Backup, Search, Publicize, Protect, ~12 sites).

Legacy code will be replaced by modernization work in #48506 at Phase 9 cutover. This fix goes away with it.

Note on the diff: the TSX file shows 119 line changes due to JSX re-indentation when adding the wrappers. Toggle "Hide whitespace changes" in the GitHub diff view to see the actual fix: 2 wrappers + 1 Prettier-mandated multi-line reformat on jp-admin-notices.

Testing

Tested live on JN sandbox with the fix deployed:

• Populated default viewport (1440x800) ✓
• Populated narrow viewport (1280x720) ✓
• Populated 80% zoom ✓
• Empty state unchanged ✓
• Build + lint + Stylelint clean

Not tested: other admin pages using AdminSectionHero, mobile viewports, many videos (5+).

Test site: https://ocelot-of-hydrozoans.jurassic.ninja/wp-admin/admin.php?page=jetpack-videopress

Before / After

The bug in numbers: at default viewport (1440x800) on the populated dashboard, the hero collapses to 1px height while its content needs 285px. That's the entire "Add new video" button (and storage meter) clipped out of view.

BEFORE (bug active): baseline state. Hero collapsed to 1px, 284px of content clipped, including the upload button. Overlay shows the computed CSS values that cause it.

AFTER (fix applied via local override): same page, flex-shrink: 0 applied to wrapper. Hero renders at full 285px, button visible. Overlay shows overflow: hidden is preserved (we don't break the shared component's semantics).

Live verification on JN with the deployed fix: dashboard after the fix was actually shipped to the sandbox, populated state, default viewport.

Notes for reviewers

This PR was built using an AI-assisted workflow (Claude Code + Chrome DevTools MCP for investigation and testing). I drove the process, AI helped with the heavy lifting on code investigation and live verification. Happy to walk through the workflow if useful.

[github-actions]

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 VIDP-242/fix-add-new-video-button-clipped branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack VIDP-242/fix-add-new-video-button-clipped

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

[github-actions]

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 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 include detailed testing steps, explaining how to test your change, like so:

## Testing instructions:

* Go to '..'
*

---

🔴 Action required: We would recommend that you add a section to the PR description to specify whether this PR includes any changes to data or privacy, like so:

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

My PR adds *x* and *y*.

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. 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!

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly:
  • Scheduled release: June 2, 2026
  • Code freeze: June 1, 2026

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

---

Videopress plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

[alinclamba]

Ran /jetpack-review-pr. Code: zero issues. One suggestion applied (aligned PR title with changelog wording: "clipped" → "disappearing"). Bot template feedback also addressed: renamed Testing section, added Privacy section, noted unrelated Forms e2e CI failure.

[Copilot]

Pull request overview

Fixes a layout regression in the legacy VideoPress wp-admin dashboard where the populated-state hero collapses and clips the “Add new video” button by preventing the hero section from shrinking in the jetpack-admin-page-layout flex column.

Changes:

• Add a local .hero-shrink-guard wrapper with flex-shrink: 0 around <AdminSectionHero> instances on the legacy VideoPress admin page.
• Add changelog entries for the VideoPress package and both the VideoPress and Jetpack plugins to document the fix.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
projects/packages/videopress/src/client/admin/components/admin-page/styles.module.scss	Adds .hero-shrink-guard with flex-shrink: 0 and documents the flex/overflow root cause.
projects/packages/videopress/src/client/admin/components/admin-page/index.tsx	Wraps <AdminSectionHero> in a non-shrinking wrapper div in both pricing and non-pricing states.
projects/plugins/videopress/changelog/fix-add-new-video-button-clipped	Changelog entry for the VideoPress plugin release notes.
projects/plugins/jetpack/changelog/fix-add-new-video-button-clipped	Changelog entry for the Jetpack plugin release notes.
projects/packages/videopress/changelog/fix-add-new-video-button-clipped	Changelog entry for the VideoPress package release notes.