From d7ff9002cfd436a0f86232fe12a2a69dcf33150e Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Tue, 23 Sep 2025 12:31:39 +0300
Subject: [PATCH] make cap selection bar appear faster, fix weird hover of
 thumbnails

---
 .../app/(org)/dashboard/caps/components/CapCard/CapCard.tsx | 6 +++---
 .../app/(org)/dashboard/caps/components/SelectedCapsBar.tsx | 6 +++---
 apps/web/components/VideoThumbnail.tsx                      | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx
index 3a9bd9698..8969b420f 100644
--- a/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx
@@ -288,11 +288,11 @@ export const CapCard = ({
 				onDragStart={handleDragStart}
 				onDragEnd={handleDragEnd}
 				className={clsx(
-					"flex relative transition-colors duration-200 flex-col gap-4 w-full h-full rounded-xl cursor-default bg-gray-1 border border-gray-3 group border-px",
+					"flex relative overflow-hidden transition-colors duration-200 flex-col gap-4 w-full h-full rounded-xl cursor-default bg-gray-1 border border-gray-3 group",
 					isSelected
-						? "!border-blue-10 border-px"
+						? "!border-blue-10"
 						: anyCapSelected
-							? "border-blue-10 border-px hover:border-blue-10"
+							? "border-blue-10 hover:border-blue-10"
 							: "hover:border-blue-10",
 					isDragging && "opacity-50",
 					isOwner && !anyCapSelected && "cursor-grab active:cursor-grabbing",
diff --git a/apps/web/app/(org)/dashboard/caps/components/SelectedCapsBar.tsx b/apps/web/app/(org)/dashboard/caps/components/SelectedCapsBar.tsx
index 79fdce4ed..8f82e8c6d 100644
--- a/apps/web/app/(org)/dashboard/caps/components/SelectedCapsBar.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/SelectedCapsBar.tsx
@@ -44,9 +44,9 @@ export const SelectedCapsBar = ({
 						transition: { duration: 0.2 },
 					}}
 					transition={{
-						opacity: { duration: 0.3, ease: "easeOut" },
-						y: { type: "spring", damping: 15, stiffness: 200 },
-						scale: { type: "spring", damping: 15, stiffness: 200 },
+						opacity: { duration: 0.2, ease: "easeOut" },
+						y: { type: "spring", damping: 15, stiffness: 300 },
+						scale: { type: "spring", damping: 15, stiffness: 300 },
 					}}
 				>
 					<div className="flex gap-1 text-sm font-medium text-gray-10">
diff --git a/apps/web/components/VideoThumbnail.tsx b/apps/web/components/VideoThumbnail.tsx
index 664404d90..e57697667 100644
--- a/apps/web/components/VideoThumbnail.tsx
+++ b/apps/web/components/VideoThumbnail.tsx
@@ -85,7 +85,7 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 		>("loading");
 
 		useEffect(() => {
-			if (imageRef.current?.complete && imageRef.current.naturalWidth != 0) {
+			if (imageRef.current?.complete && imageRef.current.naturalWidth !== 0) {
 				setImageStatus("success");
 			}
 		}, []);
@@ -124,7 +124,7 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = memo(
 						key={videoId}
 						style={{ objectFit: objectFit as any }}
 						className={clsx(
-							"w-full h-full",
+							"w-full h-full rounded-t-xl",
 							imageClass,
 							imageStatus === "loading" && "opacity-0",
 						)}