Skip to content

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

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.

Sign up for GitHub

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

Merged
obenland merged 1 commit into from
May 11, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/videopress/changelog/fix-add-new-video-button-clipped
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
119 changes: 63 additions & 56 deletions projects/packages/videopress/src/client/admin/components/admin-page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down
11 changes: 11 additions & 0 deletions projects/packages/videopress/src/client/admin/components/admin-page/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/fix-add-new-video-button-clipped
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 4 additions & 0 deletions projects/plugins/videopress/changelog/fix-add-new-video-button-clipped
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Loading