fix: console sizing issues (#6540)

fix: console sizing issues (for good)

packages/ui/src/layouts/wrapped/hosting/manage/overview.vue

@@ -1,13 +1,24 @@
 <template>
-	<div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
-		<div class="flex flex-col gap-4">
+	<div
+		class="relative flex select-none flex-col gap-6"
+		:class="containedConsole ? 'h-full min-h-0 overflow-hidden' : ''"
+		data-pyro-server-manager-root
+	>
+		<div
+			class="flex flex-col gap-4"
+			:class="containedConsole ? 'min-h-0 flex-1 overflow-hidden' : ''"
+		>
 			<ServerManageStats
+				class="shrink-0"
 				:data="!isWsAuthIncorrect ? stats : undefined"
 				:loading="isWsAuthIncorrect"
 			/>
 
-			<div class="flex min-h-[700px] flex-col gap-2">
-				<span class="text-2xl font-semibold text-contrast">Console</span>
+			<div
+				class="flex flex-col gap-2"
+				:class="containedConsole ? 'min-h-0 flex-1 overflow-hidden' : 'min-h-[700px]'"
+			>
+				<span class="shrink-0 text-2xl font-semibold text-contrast">Console</span>
 
 				<ConsolePageLayout />
 			</div>
@@ -48,9 +59,11 @@ import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers
 const props = withDefaults(
 	defineProps<{
 		showAdvancedDebugInfo?: boolean
+		containedConsole?: boolean
 	}>(),
 	{
 		showAdvancedDebugInfo: false,
+		containedConsole: false,
 	},
 )
 

packages/ui/src/layouts/wrapped/hosting/manage/root.vue

@@ -107,13 +107,17 @@
 		}"
 		:class="[
 			'server-panel-' + revealState,
-			constrainWidth ? 'min-h-[100svh] max-w-[1280px] pb-16' : 'min-h-[calc(100svh-100px)] pb-6',
+			containedLayout
+				? 'h-full min-h-0 overflow-hidden pb-6'
+				: constrainWidth
+					? 'min-h-[100svh] max-w-[1280px] pb-16'
+					: 'min-h-[calc(100svh-100px)] pb-6',
 		]"
 	>
 		<template v-if="revealState !== 'pending' || isOnboarding">
 			<ServerManageHeader
 				v-if="!isOnboarding"
-				class="server-stagger-item"
+				:class="['server-stagger-item', containedLayout ? 'shrink-0' : '']"
 				:style="{ '--si': 0 }"
 				:server="serverData"
 				:server-image="serverImage"
@@ -180,6 +184,7 @@
 				<div
 					data-pyro-navigation
 					class="server-stagger-item isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
+					:class="containedLayout ? 'shrink-0' : ''"
 					:style="{ '--si': 1 }"
 				>
 					<NavTabs :links="navLinks" replace />
@@ -187,7 +192,8 @@
 
 				<div
 					data-pyro-mount
-					class="server-stagger-item h-full w-full flex-1"
+					class="server-stagger-item w-full flex-1"
+					:class="containedLayout ? 'flex min-h-0 flex-col overflow-hidden' : 'h-full'"
 					:style="{ '--si': 2 }"
 				>
 					<div
@@ -308,7 +314,7 @@
 					</div>
 
 					<ServerPanelAdmonitions
-						class="mb-4"
+						class="mb-4 shrink-0"
 						:sync-progress="syncProgress"
 						:content-error="contentError"
 						@content-retry="handleContentRetry"
@@ -447,6 +453,7 @@ const props = withDefaults(
 			type: 'mod' | 'plugin' | 'datapack'
 		}) => void | Promise<void>
 		constrainWidth?: boolean
+		layoutMode?: 'page' | 'contained'
 	}>(),
 	{
 		showCopyIdAction: false,
@@ -462,6 +469,7 @@ const props = withDefaults(
 		browseModpacks: undefined,
 		browseContent: undefined,
 		constrainWidth: false,
+		layoutMode: 'page',
 	},
 )
 
@@ -499,6 +507,7 @@ const DISABLE_LOADING_ANIM = true
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const constrainWidth = computed(() => props.constrainWidth)
+const containedLayout = computed(() => props.layoutMode === 'contained')
 const queryClient = useQueryClient()
 const route = useRoute()
 const router = useRouter()