fix(frontend): improve centered page overflow (#7515)

* center page top when needed

* remove debug message

Author: Guilhem-lm

frontend/src/lib/components/CenteredModal.svelte

@@ -4,41 +4,60 @@
 	import WindmillIcon from './icons/WindmillIcon.svelte'
 	import LoginPageHeader from './LoginPageHeader.svelte'
 
-	export let subtitle: string | undefined = undefined
-	export let title = 'Windmill'
-	export let disableLogo = false
-	export let large = false
+	interface Props {
+		subtitle?: string | undefined
+		title?: string
+		disableLogo?: boolean
+		large?: boolean
+		centerVertically?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		subtitle = undefined,
+		title = 'Windmill',
+		disableLogo = false,
+		large = false,
+		centerVertically = true,
+		children
+	}: Props = $props()
 
 	setLicense()
 </script>
 
-<div class="center-center min-h-screen p-4 relative bg-surface-secondary">
-	<div class="flex flex-col gap-2 items-center w-full">
+<div
+	class="flex justify-center h-screen p-4 relative bg-surface-secondary overflow-auto"
+	class:items-center={centerVertically}
+	style="scrollbar-gutter: stable both-edges;"
+>
+	<div class="flex flex-col gap-2 items-center w-full pb-8 h-fit">
 		{#if (!disableLogo && !$enterpriseLicense) || !$whitelabelNameStore}
 			<div class="hidden lg:block">
 				<div>
-					<WindmillIcon height="100px" width="100px" spin="slow" />
+					<WindmillIcon size={centerVertically ? 64 : 48} spin="slow" />
 				</div>
-				<h2 class="text-center py-2 text-primary">Windmill</h2>
 			</div>
+		{:else}
+			<div class="pt-8"></div>
 		{/if}
 
+		<div class="mb-4">
+			<h1 class="text-center text-lg text-emphasis font-semibold">
+				{title}
+			</h1>
+			{#if subtitle}
+				<p class="text-xs font-normal text-primary text-center mt-2">
+					{subtitle}
+				</p>
+			{/if}
+		</div>
+
 		<div
 			class="rounded-md bg-surface w-full {large
 				? 'max-w-5xl'
-				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10"
 		>
-			<div class="mb-10">
-				<h1 class="text-center text-lg text-emphasis font-semibold">
-					{title}
-				</h1>
-				{#if subtitle}
-					<p class="text-xs font-normal text-primary text-center mt-2">
-						{subtitle}
-					</p>
-				{/if}
-			</div>
-			<slot />
+			{@render children?.()}
 		</div>
 	</div>
 

frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte

@@ -344,7 +344,7 @@
 	let domain = $derived($usersWorkspaceStore?.email.split('@')[1])
 </script>
 
-<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace">
+<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace" centerVertically={false}>
 	<div class="flex flex-col gap-8">
 		{#if isFork}
 			<div class="flex flex-block gap-2">
@@ -593,7 +593,7 @@
 				{/if}
 			</div>
 		{/if}
-		<div class="flex flex-wrap flex-row justify-between pt-12 gap-4">
+		<div class="flex flex-wrap flex-row justify-between gap-4 pt-4">
 			<Button
 				disabled={forkCreationLoading}
 				variant="default"

frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte

@@ -7,7 +7,7 @@
 	let saved = false
 </script>
 
-<CenteredModal large title="Instance settings">
+<CenteredModal large title="Instance settings" centerVertically={false}>
 	<InstanceSettings on:saved={() => (saved = true)} />
 	<p class="text-secondary text-sm px-2 py-4">
 		You can change these settings later in the instance settings but finishing setup will leave this