From a65ef5f548ea133ce6e735229cc36f8d6057bbcb Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Wed, 2 Jul 2025 14:28:14 +0100
Subject: [PATCH] fix: styling

---
 .../src/notifications/ProcessingImages.tsx    | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/src/notifications/ProcessingImages.tsx b/frontend/src/notifications/ProcessingImages.tsx
index 6f90bc8..8bf5cbf 100644
--- a/frontend/src/notifications/ProcessingImages.tsx
+++ b/frontend/src/notifications/ProcessingImages.tsx
@@ -74,29 +74,32 @@ export const ProcessingImages: Component = () => {
 					<LoadingCircle status="complete" />
 				</Show>
 			</Popover.Trigger>
-			<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl">
-				<For each={Object.entries(notifications.state.ProcessingImages)}>
-					{([id, _image]) => (
-						<Show when={_image}>
-							{(image) => (
-								<div class="flex gap-2 w-full justify-center">
-									<img
-										class="w-16 h-16 aspect-square"
-										alt="processing"
-										src={`${base}/image/${id}`}
-									/>
-									<div class="flex flex-col gap-1">
-										<p class="text-slate-100">{image().ImageName}</p>
+			<Popover.Portal>
+				<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
+					<For each={Object.entries(notifications.state.ProcessingImages)}>
+						{([id, _image]) => (
+							<Show when={_image}>
+								{(image) => (
+									<div class="flex gap-2 w-full justify-center">
+										<img
+											class="w-16 h-16 aspect-square rounded"
+											alt="processing"
+											src={`${base}/image/${id}`}
+										/>
+										<div class="flex flex-col gap-1">
+											<p class="text-slate-100">{image().ImageName}</p>
+										</div>
+										<LoadingCircle
+											status="loading"
+											class="ml-auto self-center"
+										/>
 									</div>
-									<div class="ml-auto px-4 py-2 flex place-items-center">
-										<LoadingCircle status="loading" class="ml-auto" />
-									</div>
-								</div>
-							)}
-						</Show>
-					)}
-				</For>
-			</Popover.Content>
+								)}
+							</Show>
+						)}
+					</For>
+				</Popover.Content>
+			</Popover.Portal>
 		</Popover>
 	);
 };