From 31e19b57b5a23c08df9f3f28cb53e66f25f807bd Mon Sep 17 00:00:00 2001
From: jarek <jkrochmalski@gmail.com>
Date: Fri, 31 Jul 2026 10:10:56 +0200
Subject: [PATCH] center container, stack, image and network modals with
 consistent margins

---
 src/routes/containers/ContainerInspectModal.svelte | 2 +-
 src/routes/containers/CreateContainerModal.svelte  | 2 +-
 src/routes/containers/EditContainerModal.svelte    | 2 +-
 src/routes/images/ImageHistoryModal.svelte         | 2 +-
 src/routes/networks/NetworkGraphModal.svelte       | 7 +------
 5 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/routes/containers/ContainerInspectModal.svelte b/src/routes/containers/ContainerInspectModal.svelte
index 6b9c7c9..7dea254 100644
--- a/src/routes/containers/ContainerInspectModal.svelte
+++ b/src/routes/containers/ContainerInspectModal.svelte
@@ -637,7 +637,7 @@
 </script>
 
 <Dialog.Root bind:open>
-	<Dialog.Content class="max-w-6xl w-full h-[calc(100vh-2rem)] flex flex-col">
+	<Dialog.Content class="max-w-6xl w-[calc(100%-2rem)] h-[calc(100vh-2rem)] flex flex-col">
 		<Dialog.Header class="shrink-0">
 			<Dialog.Title class="flex items-center gap-2">
 				<Box class="w-5 h-5" />
diff --git a/src/routes/containers/CreateContainerModal.svelte b/src/routes/containers/CreateContainerModal.svelte
index c97d582..329112f 100644
--- a/src/routes/containers/CreateContainerModal.svelte
+++ b/src/routes/containers/CreateContainerModal.svelte
@@ -573,7 +573,7 @@
 </script>
 
 <Dialog.Root bind:open onOpenChange={(isOpen) => isOpen && focusFirstInput()}>
-	<Dialog.Content class="max-w-4xl w-full h-[85vh] p-0 flex flex-col overflow-hidden !zoom-in-0 !zoom-out-0" showCloseButton={false}>
+	<Dialog.Content class="max-w-4xl w-[calc(100%-2rem)] h-[85vh] p-0 flex flex-col overflow-hidden !zoom-in-0 !zoom-out-0" showCloseButton={false}>
 		<Dialog.Header class="px-5 py-4 border-b bg-muted/30 shrink-0 sticky top-0 z-10">
 			<Dialog.Title class="text-base font-semibold">
 				Create new container
diff --git a/src/routes/containers/EditContainerModal.svelte b/src/routes/containers/EditContainerModal.svelte
index 9f29001..0872528 100644
--- a/src/routes/containers/EditContainerModal.svelte
+++ b/src/routes/containers/EditContainerModal.svelte
@@ -1111,7 +1111,7 @@
 		}
 	}}
 >
-	<Dialog.Content class="max-w-4xl w-full h-[85vh] p-0 flex flex-col overflow-hidden">
+	<Dialog.Content class="max-w-4xl w-[calc(100%-2rem)] h-[85vh] p-0 flex flex-col overflow-hidden">
 		<Dialog.Header class="px-5 py-4 border-b bg-muted/30 shrink-0 sticky top-0 z-10">
 			<Dialog.Title class="text-base font-semibold flex items-center gap-1">
 				Edit container
diff --git a/src/routes/images/ImageHistoryModal.svelte b/src/routes/images/ImageHistoryModal.svelte
index 778977c..b4e65d7 100644
--- a/src/routes/images/ImageHistoryModal.svelte
+++ b/src/routes/images/ImageHistoryModal.svelte
@@ -22,7 +22,7 @@
 			</Dialog.Title>
 		</Dialog.Header>
 
-		<div class="flex-1 overflow-auto space-y-4">
+		<div class="flex-1 overflow-auto space-y-4 pr-2">
 			<ImageLayersView
 				imageId={imageId}
 				imageName={imageName}
diff --git a/src/routes/networks/NetworkGraphModal.svelte b/src/routes/networks/NetworkGraphModal.svelte
index c49f81b..c6b1f72 100644
--- a/src/routes/networks/NetworkGraphModal.svelte
+++ b/src/routes/networks/NetworkGraphModal.svelte
@@ -6,11 +6,8 @@
 	import { focusFirstInput } from "$lib/utils";
 	import { ErrorDialog } from "$lib/components/ui/error-dialog";
 	import NetworkGraphViewer from "./NetworkGraphViewer.svelte";
-	import { useSidebar } from "$lib/components/ui/sidebar/context.svelte";
 	import type { NetworkInfo } from "$lib/types";
 
-	// Get sidebar state to adjust modal positioning
-	const sidebar = useSidebar();
 
 	interface Props {
 		open: boolean;
@@ -97,9 +94,7 @@
 	}}
 >
 	<Dialog.Content
-		class="max-w-none h-[95vh] flex flex-col p-0 gap-0 shadow-xl border-zinc-200 dark:border-zinc-700 {sidebar.state === 'collapsed'
-			? 'w-[calc(100vw-6rem)] ml-[1.5rem]'
-			: 'w-[calc(100vw-12rem)] ml-[4.5rem]'}"
+		class="max-w-none w-[calc(100vw-4rem)] h-[95vh] flex flex-col p-0 gap-0 shadow-xl border-zinc-200 dark:border-zinc-700"
 		showCloseButton={false}
 	>
 		<Dialog.Header class="px-5 py-3 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">