From 761f29c98162d7380c0abe017e546bcfaf11c897 Mon Sep 17 00:00:00 2001
From: Gurpal Singh <gillgurpal699@gmail.com>
Date: Thu, 14 Sep 2023 23:34:11 +0530
Subject: [PATCH] fix: padding and make images responsive

---
 app/globals.css             |  4 ++++
 app/project/[name]/page.tsx | 17 +++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 7a8a837..99d3fb8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,3 +5,7 @@
 body {
   @apply bg-[#111010] text-white;
 }
+
+.image__container img {
+  position: unset !important;
+}
diff --git a/app/project/[name]/page.tsx b/app/project/[name]/page.tsx
index 47f3efc..3dbacdf 100644
--- a/app/project/[name]/page.tsx
+++ b/app/project/[name]/page.tsx
@@ -49,15 +49,16 @@ async function ProjectPage(props: Props) {
     (p) => encodeURIComponent(p.slug) === encodeURIComponent(props.params.name)
   )!;
   return (
-    <div className="min-h-screen lg:pt-20 pt-10 container items-center justify-center flex-col lg:max-w-xl">
+    <div className="min-h-screen lg:pt-20 lg:p-0 p-5 container items-center justify-center flex-col lg:max-w-xl overflow-hidden">
       <BackButton />
-      <Image
-        className="max-w-[850px] max-h-[450px] mx-auto rounded-md mt-5"
-        src={project.image?.url}
-        alt={project.image?.alt}
-        width={project.image?.width}
-        height={project.image?.height}
-      />
+      <div className="w-full image__container">
+        <Image
+          className="mx-auto rounded-md mt-5 object-cover w-full h-[unset]"
+          src={project.image?.url}
+          alt={project.image?.alt}
+          fill
+        />
+      </div>
       {project.image.source ? (
         <p className="text-center text-gray-400">
           Source: {project.image.source}