fix progress sizing

Author: ameer2468

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

@@ -458,22 +458,27 @@ export const CapCard = ({
 						/>
 					</Link>
 					{uploadProgress && (
-						<div className="absolute inset-0 flex items-center justify-center z-50 bg-black">
+						<div className="flex absolute inset-0 z-50 justify-center items-center bg-black rounded-t-xl">
 							{uploadProgress.status === "failed" ? (
 								<div className="flex flex-col items-center">
-									<div className="flex items-center justify-center mb-2 w-8 h-8 bg-red-500 rounded-full">
+									<div className="flex justify-center items-center mb-2 w-8 h-8 bg-red-500 rounded-full">
 										<FontAwesomeIcon
 											icon={faVideo}
 											className="text-white size-3"
 										/>
 									</div>
-									<p className="text-xs text-white text-center">
+									<p className="text-xs text-center text-white">
 										Upload failed
 									</p>
 								</div>
 							) : (
-								<div className="relative size-14">
-									<ProgressCircle progress={uploadProgress.progress} />
+								<div className="relative size-20 md:size-16">
+									<ProgressCircle
+										progressTextClassName="md:!text-[11px]"
+										subTextClassName="!mt-0 md:!text-[7px] !text-[10px] mb-1"
+										className="md:scale-[1.5] scale-[1.2]"
+										progress={50}
+									/>
 								</div>
 							)}
 						</div>

apps/web/app/s/[videoId]/_components/ProgressCircle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { Video } from "@cap/web-domain";
+import clsx from "clsx";
 import { Effect, Option } from "effect";
 import { useEffectQuery } from "@/lib/EffectRuntime";
 import { withRpc } from "@/lib/Rpcs";
@@ -63,9 +64,24 @@ export function useUploadProgress(
 	) satisfies UploadProgress;
 }
 
-const ProgressCircle = ({ progress }: { progress: number }) => {
+const ProgressCircle = ({
+	progress,
+	className,
+	progressTextClassName,
+	subTextClassName,
+}: {
+	progress: number;
+	className?: string;
+	progressTextClassName?: string;
+	subTextClassName?: string;
+}) => {
 	return (
-		<div className="relative scale-100 size-full sm:scale-110 md:scale-[1.3]">
+		<div
+			className={clsx(
+				"relative scale-100 size-full sm:scale-110 md:scale-[1.3]",
+				className,
+			)}
+		>
 			<svg className="transform -rotate-90 size-full" viewBox="0 0 100 100">
 				<title>Progress Circle</title>
 				<circle
@@ -91,10 +107,22 @@ const ProgressCircle = ({ progress }: { progress: number }) => {
 			</svg>
 
 			<div className="flex absolute inset-0 flex-col justify-center items-center p-2">
-				<p className="text-sm font-semibold tabular-nums text-white xs:text-sm md:text-lg">
+				<p
+					className={clsx(
+						"text-sm font-semibold tabular-nums md:leading-tight leading-tight text-white xs:text-sm md:text-lg",
+						progressTextClassName,
+					)}
+				>
 					{Math.round(progress)}%
 				</p>
-				<p className="mt-0.5 text-[10px] text-white/80">Uploading...</p>
+				<p
+					className={clsx(
+						"mt-0.5 leading-tight text-[10px] text-white/80",
+						subTextClassName,
+					)}
+				>
+					Uploading...
+				</p>
 			</div>
 		</div>
 	);