From 1efd0df8c73e563ea98138717d87bff11287584a Mon Sep 17 00:00:00 2001
From: gaur777 <rhythmgaur777@gmail.com>
Date: Tue, 7 Apr 2026 17:16:14 +0530
Subject: [PATCH] Fix course completion badge overlapping breadcrumb bar

---
 src/components/ContentCard.tsx | 8 ++++----
 src/components/CourseView.tsx  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
index 6da7613ec..f12d1a46a 100644
--- a/src/components/ContentCard.tsx
+++ b/src/components/ContentCard.tsx
@@ -51,17 +51,17 @@ export const ContentCard = ({
             className={`group relative flex h-fit w-full max-w-md cursor-pointer flex-col gap-2 rounded-2xl transition-all duration-300 hover:-translate-y-2`}
           >
             {markAsCompleted && (
-              <div className="absolute right-2 top-2 z-10">
+              <div className="absolute right-2 top-2 z-[1]">
                 <CheckCircle2 color="green" size={30} fill="lightgreen" />
               </div>
             )}
             {type === 'video' && (
-              <div className="absolute bottom-12 right-2 z-10 rounded-md p-2 font-semibold text-white">
+              <div className="absolute bottom-12 right-2 z-[1] rounded-md p-2 font-semibold text-white">
                 <Play className="size-6" />
               </div>
             )}
             {type !== 'video' && (
-              <div className="relative overflow-hidden rounded-md">
+              <div className="relative z-0 overflow-hidden rounded-md">
                 <CardComponent
                   title={title}
                   contentDuration={
@@ -80,7 +80,7 @@ export const ContentCard = ({
               </div>
             )}
             {type === 'video' && (
-              <div className="relative overflow-hidden">
+              <div className="relative z-0 overflow-hidden">
                 <VideoThumbnail
                   title={title}
                   contentId={contentId ?? 0}
diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
index 0646bc81f..d79c2f0a7 100644
--- a/src/components/CourseView.tsx
+++ b/src/components/CourseView.tsx
@@ -40,7 +40,7 @@ export const CourseView = ({
 
   return (
     <div className="relative flex w-full flex-col gap-8 pb-16 pt-8 xl:pt-[9px]">
-      <div className="sticky top-[73px] z-10 flex flex-col gap-4 bg-background py-2 xl:pt-2">
+      <div className="sticky top-[73px] z-20 isolate flex flex-col gap-4 bg-background py-2 xl:pt-2">
         <BreadCrumbComponent
           course={course}
           contentType={contentType}