From df648217e23452610fe4cd4df82350ebe6e8ca04 Mon Sep 17 00:00:00 2001
From: tanmay bansal <121656091+TanmayBansa1@users.noreply.github.com>
Date: Thu, 13 Mar 2025 19:37:10 +0530
Subject: [PATCH] fixed track preview card

---
 apps/web/components/TrackPreview.tsx | 11 +++++++----
 apps/web/next.config.js              | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/TrackPreview.tsx b/apps/web/components/TrackPreview.tsx
index d3b85e0d..3a65e785 100644
--- a/apps/web/components/TrackPreview.tsx
+++ b/apps/web/components/TrackPreview.tsx
@@ -5,6 +5,7 @@ import { Button } from "../../../packages/ui/src/shad/ui/button";
 import { Dialog, DialogContent } from "../../../packages/ui/src/shad/ui/dailog";
 import { ArrowRight } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
+import { Separator } from "@repo/ui";
 
 type TrackPreviewProps = {
   showPreview: boolean;
@@ -40,9 +41,11 @@ 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" />
+      <DialogContent className="flex items-center gap-4 max-h-[90vh] overflow-scroll no-scrollbar">
+        <div className="flex flex-col space-y-4 w-full">
+          <Separator className="w-full" />
+          <Separator className="w-full" />
+          <img src={track.image} alt={track.title} className="rounded-md mx-auto max-h-[30vh] pt-12" />
           <div className="flex flex-col gap-4 bg-primary/5 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>
@@ -68,7 +71,7 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
                 {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="max-h-[25vh] overflow-y-auto flex flex-col gap-3 w-full py-2 no-scrollbar">
               {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">
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 1d532ed8..bd7e81c2 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -25,6 +25,19 @@ module.exports = {
 
   transpilePackages: ["@repo/ui", "@repo/common", "@repo/recoil"],
   images: {
-    domains: ["d2szwvl7yo497w.cloudfront.net", "appx-wsb-gcp.akamai.net.in"], // Add your domain here
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "d2szwvl7yo497w.cloudfront.net",
+        port: "",
+        pathname: "/**",
+      },
+      {
+        protocol: "https",
+        hostname: "appx-wsb-gcp.akamai.net.in",
+        port: "",
+        pathname: "/**",
+      }
+    ],
   },
 };