fix: styling of entity and images page

frontend/src/components/image/index.tsx

@@ -4,7 +4,7 @@ import { A } from "@solidjs/router";
 
 export const ImageComponent: Component<{ ID: string }> = (props) => {
 	return (
-		<A href={`/image/${props.ID}`} class="w-full h-full">
+		<A href={`/image/${props.ID}`} class="w-full h-full flex justify-center">
 			<img
 				class="w-full object-contain rounded-xl max-w-[700px] max-h-[400px]"
 				src={`${base}/image/${props.ID}`}

frontend/src/pages/entity/index.tsx

@@ -12,22 +12,17 @@ export const Entity: Component = () => {
 	const entity = () => images().find((i) => i.data.ID === params.entityId);
 
 	return (
-		<div>
+		<Show when={entity()} fallback={<>Sorry, this entity could not be found</>}>
-			<Show
+			{(e) => (
-				when={entity()}
+				<div>
-				fallback={<>Sorry, this entity could not be found</>}
+					<ItemModal item={e()} />
-			>
+					<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 bg-white p-4 rounded-xl border border-neutral-200">
-				{(e) => (
+						<For each={e().data.Images}>
-					<div>
+							{(imageId) => <ImageComponent ID={imageId} />}
-						<ItemModal item={e()} />
+						</For>
-						<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>
-				)}
+				</div>
-			</Show>
+			)}
-		</div>
+		</Show>
 	);
 };

frontend/src/pages/image/index.tsx

@@ -14,9 +14,11 @@ export const ImagePage: Component = () => {
 		Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];
 
 	return (
-		<main class="flex flex-col items-center">
+		<main class="flex flex-col items-center gap-4">
-			<ImageComponent ID={imageId} />
+			<div class="w-full bg-white rounded-xl p-4">
-			<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
+				<ImageComponent ID={imageId} />
+			</div>
+			<div class="w-full grid grid-cols-3 gap-2 grid-flow-row-dense p-4 bg-white rounded-xl">
 				<Show when={imageProperties()}>
 					{(image) => (
 						<For each={image()}>