fix(capcard): fix upload progress visibility check and link block layout

Author: richiemcilroy

apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx

@@ -213,6 +213,8 @@ export const CapCard = ({
 		cap.id,
 		cap.hasActiveUpload || false,
 	);
+	const hasVisibleUploadProgress =
+		uploadProgress !== null && uploadProgress.status !== "fetching";
 	const [imageStatus, setImageStatus] = useState<ImageLoadingStatus>("loading");
 	const prevUploadProgressRef = useRef(uploadProgress);
 
@@ -595,7 +597,7 @@ export const CapCard = ({
 				<div className="relative aspect-video w-full">
 					<Link
 						className={clsx(
-							"relative",
+							"relative block w-full h-full",
 							// "block group",
 							anyCapSelected && "cursor-pointer pointer-events-none",
 						)}
@@ -604,7 +606,7 @@ export const CapCard = ({
 						}}
 						href={`/s/${cap.id}`}
 					>
-						{uploadProgress && uploadProgress?.status !== "fetching" && (
+						{hasVisibleUploadProgress && (
 							<>
 								<div className="absolute inset-0 z-20 transition-all duration-300 bg-black/60 rounded-t-xl" />
 								<div className="flex absolute bottom-3 left-3 gap-2 items-center z-30">
@@ -697,7 +699,9 @@ export const CapCard = ({
 						)}
 
 						<VideoThumbnail
-							videoDuration={cap.duration}
+							videoDuration={
+								hasVisibleUploadProgress ? undefined : cap.duration
+							}
 							imageClass={clsx(
 								anyCapSelected
 									? "opacity-50"