Fixes code100x#729 : Image problem fixed

Author: Kartikey

apps/web/components/TrackPreview.tsx

@@ -41,37 +41,37 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
   return (
     <Dialog open={showPreview} onOpenChange={() => setShowPreview(false)}>
       <DialogContent className="flex items-center gap-4">
-        <div className="flex flex-col gap-4 w-full">
-          <img src={track.image} className="h-[25vh] w-full object-cover rounded-lg" />
-          <div className="flex flex-col gap-4 bg-primary/5 rounded-lg p-4">
+        <div className="flex w-full flex-col gap-4">
+          <img src={track.image} className="h-[25vh] w-full rounded-lg object-contain" />
+          <div className="bg-primary/5 flex flex-col gap-4 rounded-lg p-4">
             <div className="flex flex-col gap-4">
-              <h3 className="text-xl md:text-2xl font-semibold w-full tracking-tight">{track.title}</h3>
+              <h3 className="w-full text-xl font-semibold tracking-tight md:text-2xl">{track.title}</h3>
               <div className="flex items-center gap-4">
                 {track.categories.map((item: any, idx: number) => (
                   <p
                     key={item.category.id}
-                    className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
+                    className="bg-secondary/25 border-primary/10 w-fit cursor-default rounded-lg border px-3 py-2 text-sm"
                   >
                     {item.category.category}{" "}
                   </p>
                 ))}
               </div>
             </div>
-            <p className="md:text-lg tracking-tighter line-clamp-3 text-primary/60">{truncatedDescription}</p>
+            <p className="text-primary/60 line-clamp-3 tracking-tighter md:text-lg">{truncatedDescription}</p>
           </div>
-          <div className="flex flex-col gap-4 w-full">
-            <div className="flex gap-2 items-center">
-              <p className="flex tracking-tighter gap-2 text-primary text-lg md:text-xl font-semibold">
+          <div className="flex w-full flex-col gap-4">
+            <div className="flex items-center gap-2">
+              <p className="text-primary flex gap-2 text-lg font-semibold tracking-tighter md:text-xl">
                 {track.problems.length} Chapters
               </p>
-              <p className="flex tracking-tight gap-2 text-primary/60 md:text-lg">
+              <p className="text-primary/60 flex gap-2 tracking-tight md:text-lg">
                 {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
               </p>
             </div>
-            <div className="max-h-[25vh] overflow-y-auto flex flex-col gap-3 w-full py-2">
+            <div className="flex max-h-[25vh] w-full flex-col gap-3 overflow-y-auto py-2">
               {track.problems.map((topic: any, idx: number) => (
                 <Link key={topic.id} href={`/tracks/${track.id}/${track.problems[idx]?.id}`}>
-                  <div className="cursor-pointer hover:-translate-y-1 flex items-center justify-between bg-primary/5 rounded-lg px-4 py-3 hover:bg-primary/10 transition-all duration-300 scroll-smooth w-full">
+                  <div className="bg-primary/5 hover:bg-primary/10 flex w-full cursor-pointer items-center justify-between scroll-smooth rounded-lg px-4 py-3 transition-all duration-300 hover:-translate-y-1">
                     {topic.title}
                     <ArrowRight className="size-4" />
                   </div>
@@ -82,7 +82,7 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
           <Link href={track.problems.length ? `/tracks/${track.id}/${track.problems[0]?.id}` : ""}>
             <Button
               size={"lg"}
-              className="flex items-center justify-center bg-blue-600 text-white hover:bg-blue-500 transition-all duration-300"
+              className="flex items-center justify-center bg-blue-600 text-white transition-all duration-300 hover:bg-blue-500"
               onClick={(e) => e.stopPropagation()}
             >
               Start