From 6523b106996a714e04f693541375451b86ef9269 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Mon, 25 Aug 2025 14:34:55 +0100
Subject: [PATCH] showing a full height image in image page

---
 frontend/src/components/image/index.tsx | 11 +++++++++++
 frontend/src/pages/image/index.tsx      |  4 ++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index e7ccd7d..b426cfe 100644
--- a/frontend/src/components/image/index.tsx
+++ b/frontend/src/components/image/index.tsx
@@ -12,3 +12,14 @@ export const ImageComponent: Component<{ ID: string }> = (props) => {
 		</A>
 	);
 };
+
+export const ImageComponentFullHeight: Component<{ ID: string }> = (props) => {
+	return (
+		<A href={`/image/${props.ID}`} class="w-full flex justify-center">
+			<img
+				class="flex w-full object-cover rounded-xl"
+				src={`${base}/images/${props.ID}`}
+			/>
+		</A>
+	);
+};
diff --git a/frontend/src/pages/image/index.tsx b/frontend/src/pages/image/index.tsx
index 7a8edfd..af435e5 100644
--- a/frontend/src/pages/image/index.tsx
+++ b/frontend/src/pages/image/index.tsx
@@ -1,4 +1,4 @@
-import { ImageComponent } from "@components/image";
+import { ImageComponentFullHeight } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { useParams } from "@solidjs/router";
 import { For, type Component } from "solid-js";
@@ -15,7 +15,7 @@ export const ImagePage: Component = () => {
 	return (
 		<main class="flex flex-col items-center gap-4">
 			<div class="w-full bg-white rounded-xl p-4">
-				<ImageComponent ID={imageId} />
+				<ImageComponentFullHeight ID={imageId} />
 			</div>
 			<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
 				<h2 class="font-bold text-2xl">Description</h2>