From 13330e632812e851155fd79cf54baad8df772cbc Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 15 Jul 2026 14:53:32 +0200
Subject: [PATCH] fix(ui): expandable video preview image (#47964)

## What kind of change does this PR introduce?

Restore preview image on ExpandableVideo trigger component.

## What is the current behavior?
<img width="1441" height="698" alt="Screenshot 2026-07-15 at 14 08 58"
src="https://github.com/user-attachments/assets/bdb1c4be-71a9-4601-b5c9-ab4fc97c48d1"
/>

<img width="1273" height="701" alt="Screenshot 2026-07-15 at 14 09 05"
src="https://github.com/user-attachments/assets/b8026bcc-3d43-4faa-873b-1745b32c166c"
/>

## What is the new behavior?
<img width="1434" height="678" alt="Screenshot 2026-07-15 at 14 08 53"
src="https://github.com/user-attachments/assets/8a3e64d1-5fe7-4ab9-a71b-3de5808d28b9"
/>

<img width="1160" height="672" alt="Screenshot 2026-07-15 at 14 08 48"
src="https://github.com/user-attachments/assets/db598a47-ed8e-435b-b3ef-8ae9e76761a2"
/>

---

Also fixed a border-b issue on the PartnerCatalogDetail.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
  - Added thumbnail previews for partner catalog YouTube videos.
- Improved video preview presentation with clearer overlays and stronger
image blur.

- **Bug Fixes**
  - Updated image loading support for YouTube thumbnail URLs.
  - Refined sticky tab header spacing and alignment while scrolling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../catalog/[slug]/PartnerCatalogDetail.tsx   | 69 ++++++++++---------
 apps/www/lib/remotePatterns.js                |  2 +-
 .../ui-patterns/src/ExpandableVideo/index.tsx |  9 ++-
 3 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx b/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx
index e9714c06a5e..799dce4e643 100644
--- a/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx
+++ b/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx
@@ -261,45 +261,49 @@ export default function PartnerCatalogDetail({ partner, serializedListings }: Pr
             </div>
           </SectionContainerWithCn>
           <div className="absolute h-full w-full inset-0 z-20 pointer-events-none">
-            <SectionContainerWithCn
-              height="none"
+            <div
               className={cn(
-                'transition-all bg-background/90 -translate-y-3/4 dark:bg-background/95 backdrop-blur-xs border-b sticky top-16 z-20 flex justify-between items-center gap-4 py-2',
+                'transition-all border-b bg-background/90 -translate-y-3/4 dark:bg-background/95 backdrop-blur-xs sticky top-16 z-20',
                 showStickyBar
                   ? 'opacity-100 pointer-events-auto translate-y-0'
                   : 'opacity-0 pointer-events-none'
               )}
             >
-              <div className="flex items-center space-x-2">
-                <Image
-                  width={56}
-                  height={56}
-                  className="hidden sm:block bg-white p-0.5 shrink-0 h-6 w-6 rounded-full border"
-                  src={partner.logo}
-                  alt={partner.title}
-                />
-                <div className="flex flex-col sm:flex-row sm:items-center sm:gap-1">
-                  <span className="sm:text-lg truncate">{partner.title}</span>
-                  {activeListing && (
-                    <>
-                      <span className="text-foreground-lighter text-sm hidden sm:inline">—</span>
-                      <span className="text-foreground-lighter text-sm truncate">
-                        {activeListing.label}
-                      </span>
-                    </>
-                  )}
+              <SectionContainerWithCn
+                height="none"
+                className="flex justify-between items-center gap-4 py-2"
+              >
+                <div className="flex items-center space-x-2">
+                  <Image
+                    width={56}
+                    height={56}
+                    className="hidden sm:block bg-white p-0.5 shrink-0 h-6 w-6 rounded-full border"
+                    src={partner.logo}
+                    alt={partner.title}
+                  />
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:gap-1">
+                    <span className="sm:text-lg truncate">{partner.title}</span>
+                    {activeListing && (
+                      <>
+                        <span className="text-foreground-lighter text-sm hidden sm:inline">—</span>
+                        <span className="text-foreground-lighter text-sm truncate">
+                          {activeListing.label}
+                        </span>
+                      </>
+                    )}
+                  </div>
                 </div>
-              </div>
-              {installHref && (
-                <Button asChild>
-                  <a href={installHref} target="_blank" rel="noreferrer">
-                    {activeListing.publishedInMarketplace
-                      ? 'Install integration'
-                      : 'Add integration'}
-                  </a>
-                </Button>
-              )}
-            </SectionContainerWithCn>
+                {installHref && (
+                  <Button asChild>
+                    <a href={installHref} target="_blank" rel="noreferrer">
+                      {activeListing.publishedInMarketplace
+                        ? 'Install integration'
+                        : 'Add integration'}
+                    </a>
+                  </Button>
+                )}
+              </SectionContainerWithCn>
+            </div>
           </div>
         </div>
 
@@ -331,6 +335,7 @@ function PartnerDetails({
         {activeListing.youtubeId && (
           <ExpandableVideo
             videoId={activeListing.youtubeId}
+            imgUrl={`https://img.youtube.com/vi/${activeListing.youtubeId}/0.jpg`}
             imgOverlayText="Watch an introductory video"
             triggerContainerClassName="w-full"
           />
diff --git a/apps/www/lib/remotePatterns.js b/apps/www/lib/remotePatterns.js
index d8eaa931cd8..5f4b927addd 100644
--- a/apps/www/lib/remotePatterns.js
+++ b/apps/www/lib/remotePatterns.js
@@ -45,7 +45,7 @@ module.exports = [
     protocol: 'https',
     hostname: 'img.youtube.com',
     port: '',
-    pathname: '/vi/*',
+    pathname: '/vi/**',
   },
   {
     protocol: 'https',
diff --git a/packages/ui-patterns/src/ExpandableVideo/index.tsx b/packages/ui-patterns/src/ExpandableVideo/index.tsx
index ae998b9b46d..d0682c1b17b 100644
--- a/packages/ui-patterns/src/ExpandableVideo/index.tsx
+++ b/packages/ui-patterns/src/ExpandableVideo/index.tsx
@@ -33,21 +33,20 @@ export function ExpandableVideo({
   }, [isMobile])
 
   const CliccablePreview = () => (
-    <div className="video-container overflow-hidden rounded-sm hover:cursor-pointer">
+    <div className="video-container overflow-hidden rounded-sm hover:cursor-pointer bg-alternative border">
       <div
         className="
           absolute inset-0 z-10
           text-white
           flex flex-col gap-3
           items-center justify-center
-          bg-alternative
           before:content['']
           before:absolute
           before:inset-0
           before:bg-black
-          before:opacity-30
+          before:opacity-60
           before:-z-10
-          hover:before:opacity-50
+          hover:before:opacity-80
           before:transition-opacity
         "
       >
@@ -60,7 +59,7 @@ export function ExpandableVideo({
         fill
         sizes="100%"
         priority={priority}
-        className="absolute inset-0 object-cover blur-xs scale-105"
+        className="absolute inset-0 object-cover blur-md scale-105"
       />
     </div>
   )