From 8feae5249c55ea6b985ab8c36b81fd2eb32baf5c Mon Sep 17 00:00:00 2001
From: Alin Clamba <alin.clamba@automattic.com>
Date: Mon, 11 May 2026 11:54:12 +0300
Subject: [PATCH] VideoPress: fix Add new video button disappearing on the
 admin dashboard

---
 .../fix-add-new-video-button-clipped          |   4 +
 .../admin/components/admin-page/index.tsx     | 119 +++++++++---------
 .../components/admin-page/styles.module.scss  |  11 ++
 .../fix-add-new-video-button-clipped          |   4 +
 .../fix-add-new-video-button-clipped          |   4 +
 5 files changed, 86 insertions(+), 56 deletions(-)
 create mode 100644 projects/packages/videopress/changelog/fix-add-new-video-button-clipped
 create mode 100644 projects/plugins/jetpack/changelog/fix-add-new-video-button-clipped
 create mode 100644 projects/plugins/videopress/changelog/fix-add-new-video-button-clipped

diff --git a/projects/packages/videopress/changelog/fix-add-new-video-button-clipped b/projects/packages/videopress/changelog/fix-add-new-video-button-clipped
new file mode 100644
index 000000000000..53b668b8ca5d
--- /dev/null
+++ b/projects/packages/videopress/changelog/fix-add-new-video-button-clipped
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix the Add new video button disappearing on the admin dashboard after the first video is uploaded.
diff --git a/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx b/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx
index fe9703bb8762..3e8f9272b994 100644
--- a/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx
+++ b/projects/packages/videopress/src/client/admin/components/admin-page/index.tsx
@@ -95,73 +95,80 @@ const Admin = () => {
 			</div>
 
 			{ showPricingSection ? (
-				<AdminSectionHero>
-					<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
-						<Col sm={ 4 } md={ 8 } lg={ 12 }>
-							<PricingSection onRedirecting={ () => setShowPricingSection( true ) } />
-						</Col>
-					</Container>
-				</AdminSectionHero>
-			) : (
-				<>
+				<div className={ styles[ 'hero-shrink-guard' ] }>
 					<AdminSectionHero>
-						<Container horizontalSpacing={ 0 }>
-							<Col>
-								<div id="jp-admin-notices" className={ styles[ 'jetpack-videopress-jitm-card' ] } />
+						<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
+							<Col sm={ 4 } md={ 8 } lg={ 12 }>
+								<PricingSection onRedirecting={ () => setShowPricingSection( true ) } />
 							</Col>
 						</Container>
-
-						<Container horizontalSpacing={ 6 } horizontalGap={ 3 }>
-							{ hasConnectionError && (
+					</AdminSectionHero>
+				</div>
+			) : (
+				<>
+					<div className={ styles[ 'hero-shrink-guard' ] }>
+						<AdminSectionHero>
+							<Container horizontalSpacing={ 0 }>
 								<Col>
-									<ConnectionError />
-								</Col>
-							) }
-
-							{ ( ! hasConnectedOwner || ! isUserConnected ) && (
-								<Col sm={ 4 } md={ 8 } lg={ 12 }>
-									<NeedUserConnectionGlobalNotice />
+									<div
+										id="jp-admin-notices"
+										className={ styles[ 'jetpack-videopress-jitm-card' ] }
+									/>
 								</Col>
-							) }
+							</Container>
 
-							<Col sm={ 4 } md={ 8 } lg={ 8 }>
-								<Text variant="headline-small" mb={ 3 }>
-									{ __( 'High quality, ad-free video', 'jetpack-videopress-pkg' ) }
-								</Text>
+							<Container horizontalSpacing={ 6 } horizontalGap={ 3 }>
+								{ hasConnectionError && (
+									<Col>
+										<ConnectionError />
+									</Col>
+								) }
 
-								{ hasVideoPressPurchase && (
-									<ConnectVideoStorageMeter className={ styles[ 'storage-meter' ] } />
+								{ ( ! hasConnectedOwner || ! isUserConnected ) && (
+									<Col sm={ 4 } md={ 8 } lg={ 12 }>
+										<NeedUserConnectionGlobalNotice />
+									</Col>
 								) }
 
-								{ hasVideos ? (
-									<FormFileUpload
-										onChange={ evt =>
-											handleFilesUpload( filterVideoFiles( evt.currentTarget.files ) )
-										}
-										accept={ fileInputExtensions }
-										multiple={ hasVideoPressPurchase }
-										render={ ( { openFileDialog } ) => (
-											<Button
-												fullWidth={ isSm }
-												onClick={ openFileDialog }
-												isLoading={ loading }
-												disabled={ ! canUpload }
-											>
-												{ __( 'Add new video', 'jetpack-videopress-pkg' ) }
-											</Button>
-										) }
-										__next40pxDefaultSize={ true }
-									/>
-								) : (
-									<Text variant="title-medium">
-										{ __( "Let's add your first video below!", 'jetpack-videopress-pkg' ) }
+								<Col sm={ 4 } md={ 8 } lg={ 8 }>
+									<Text variant="headline-small" mb={ 3 }>
+										{ __( 'High quality, ad-free video', 'jetpack-videopress-pkg' ) }
 									</Text>
-								) }
 
-								{ ! hasVideoPressPurchase && <UpgradeTrigger hasUsedVideo={ hasVideos } /> }
-							</Col>
-						</Container>
-					</AdminSectionHero>
+									{ hasVideoPressPurchase && (
+										<ConnectVideoStorageMeter className={ styles[ 'storage-meter' ] } />
+									) }
+
+									{ hasVideos ? (
+										<FormFileUpload
+											onChange={ evt =>
+												handleFilesUpload( filterVideoFiles( evt.currentTarget.files ) )
+											}
+											accept={ fileInputExtensions }
+											multiple={ hasVideoPressPurchase }
+											render={ ( { openFileDialog } ) => (
+												<Button
+													fullWidth={ isSm }
+													onClick={ openFileDialog }
+													isLoading={ loading }
+													disabled={ ! canUpload }
+												>
+													{ __( 'Add new video', 'jetpack-videopress-pkg' ) }
+												</Button>
+											) }
+											__next40pxDefaultSize={ true }
+										/>
+									) : (
+										<Text variant="title-medium">
+											{ __( "Let's add your first video below!", 'jetpack-videopress-pkg' ) }
+										</Text>
+									) }
+
+									{ ! hasVideoPressPurchase && <UpgradeTrigger hasUsedVideo={ hasVideos } /> }
+								</Col>
+							</Container>
+						</AdminSectionHero>
+					</div>
 					<AdminSection>
 						<Container horizontalSpacing={ 6 } horizontalGap={ 10 }>
 							{ hasVideos ? (
diff --git a/projects/packages/videopress/src/client/admin/components/admin-page/styles.module.scss b/projects/packages/videopress/src/client/admin/components/admin-page/styles.module.scss
index 867964766d79..6d4b41a0c98b 100644
--- a/projects/packages/videopress/src/client/admin/components/admin-page/styles.module.scss
+++ b/projects/packages/videopress/src/client/admin/components/admin-page/styles.module.scss
@@ -41,6 +41,17 @@
 	}
 }
 
+// VIDP-242: prevent <AdminSectionHero> from being shrunk to 0 by the
+// jetpack-admin-page-layout flex chain. The shared .section-hero has
+// overflow: hidden, which lets its min-height: auto resolve to 0 in a
+// flex column, so the hero absorbs all shrink pressure from the populated
+// library and clips the "Add new video" button. This wrapper keeps the
+// hero at content height. Safe to remove when the legacy dashboard is
+// retired at the Phase 9 cutover of issue #48506.
+.hero-shrink-guard {
+	flex-shrink: 0;
+}
+
 .first-video-wrapper {
 	display: flex;
 	flex-direction: column;
diff --git a/projects/plugins/jetpack/changelog/fix-add-new-video-button-clipped b/projects/plugins/jetpack/changelog/fix-add-new-video-button-clipped
new file mode 100644
index 000000000000..30d80e2c45ce
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-add-new-video-button-clipped
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+VideoPress: fix the Add new video button disappearing on the admin dashboard after the first video is uploaded.
diff --git a/projects/plugins/videopress/changelog/fix-add-new-video-button-clipped b/projects/plugins/videopress/changelog/fix-add-new-video-button-clipped
new file mode 100644
index 000000000000..53b668b8ca5d
--- /dev/null
+++ b/projects/plugins/videopress/changelog/fix-add-new-video-button-clipped
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix the Add new video button disappearing on the admin dashboard after the first video is uploaded.