From 5d0fa51e01e0348135591be0712186b239eba7f0 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Mon, 21 Jul 2025 14:09:09 +0100
Subject: [PATCH] fix: entity page looking bussin

whoops
---
 frontend/src/components/image/index.tsx          |  2 +-
 frontend/src/components/item-modal/ItemModal.tsx | 16 +++-------------
 frontend/src/pages/entity/index.tsx              | 12 +++++++-----
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index 0eea15f..b870692 100644
--- a/frontend/src/components/image/index.tsx
+++ b/frontend/src/components/image/index.tsx
@@ -6,7 +6,7 @@ export const ImageComponent: Component<{ ID: string }> = (props) => {
 	return (
 		<A href={`/image/${props.ID}`} class="w-full h-full">
 			<img
-				class="w-full object-contain rounded-xl max-h-[400px]"
+				class="w-full object-contain rounded-xl max-w-[700px] max-h-[400px]"
 				src={`${base}/image/${props.ID}`}
 			/>
 		</A>
diff --git a/frontend/src/components/item-modal/ItemModal.tsx b/frontend/src/components/item-modal/ItemModal.tsx
index a25ec6d..71572fe 100644
--- a/frontend/src/components/item-modal/ItemModal.tsx
+++ b/frontend/src/components/item-modal/ItemModal.tsx
@@ -1,11 +1,9 @@
-import { IconX } from "@tabler/icons-solidjs";
 import type { UserImage } from "../../network";
 import { Show, type Component } from "solid-js";
 import SolidjsMarkdown from "solidjs-markdown";
 
 type Props = {
 	item: UserImage;
-	onClose: () => void;
 };
 
 const NullableParagraph: Component<{
@@ -24,7 +22,7 @@ const NullableParagraph: Component<{
 	);
 };
 
-export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
+const ConcreteItemModal: Component<Props> = (props) => {
 	switch (props.item.type) {
 		case "note":
 			return (
@@ -77,16 +75,8 @@ export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
 
 export const ItemModal: Component<Props> = (props) => {
 	return (
-		<div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
-			<div class="flex justify-between">
-				<h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
-				<button type="button" onClick={props.onClose}>
-					<IconX size={24} class="text-neutral-500" />
-				</button>
-			</div>
-			<div class="flex flex-col gap-2 mb-2">
-				<ConcreteItemModal item={props.item} />
-			</div>
+		<div class="rounded-2xl p-4 bg-white border border-neutral-300 flex flex-col gap-2 mb-2">
+			<ConcreteItemModal item={props.item} />
 		</div>
 	);
 };
diff --git a/frontend/src/pages/entity/index.tsx b/frontend/src/pages/entity/index.tsx
index aa920e0..d716ee3 100644
--- a/frontend/src/pages/entity/index.tsx
+++ b/frontend/src/pages/entity/index.tsx
@@ -1,5 +1,5 @@
 import { ImageComponent } from "@components/image";
-import { ConcreteItemModal } from "@components/item-modal/ItemModal";
+import { ItemModal } from "@components/item-modal/ItemModal";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { useParams } from "@solidjs/router";
 import { Component, For, Show } from "solid-js";
@@ -19,10 +19,12 @@ export const Entity: Component = () => {
 			>
 				{(e) => (
 					<div>
-						<ConcreteItemModal item={e()} />
-						<For each={e().data.Images}>
-							{(imageId) => <ImageComponent ID={imageId} />}
-						</For>
+						<ItemModal item={e()} />
+						<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4">
+							<For each={e().data.Images}>
+								{(imageId) => <ImageComponent ID={imageId} />}
+							</For>
+						</div>
 					</div>
 				)}
 			</Show>