fix: console sizing issues (#6540)

fix: console sizing issues (for good)

apps/app-frontend/src/pages/hosting/manage/Index.vue

@@ -1,7 +1,11 @@
 <template>
-	<div class="h-full w-full pt-6">
+	<div
+		class="h-full w-full pt-6"
+		:class="isContainedServerRoute ? 'box-border min-h-0 overflow-hidden' : ''"
+	>
 		<ServersManageRootLayout
 			:server-id="serverId"
+			:layout-mode="isContainedServerRoute ? 'contained' : 'page'"
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
 			:show-copy-id-action="themeStore.devMode"
@@ -63,6 +67,8 @@ const queryClient = useQueryClient()
 const themeStore = useTheming()
 const breadcrumbs = useBreadcrumbs()
 
+const isContainedServerRoute = computed(() => route.name === 'ServerManageOverview')
+
 const serverId = computed(() => {
 	const rawId = route.params.id
 	return Array.isArray(rawId) ? rawId[0] : (rawId ?? '')

apps/app-frontend/src/pages/hosting/manage/Overview.vue

@@ -3,5 +3,5 @@ import { ServersManageOverviewPage } from '@modrinth/ui'
 </script>
 
 <template>
-	<ServersManageOverviewPage />
+	<ServersManageOverviewPage contained-console />
 </template>

apps/app-frontend/src/routes.js

@@ -247,6 +247,7 @@ export default new createRouter({
 					name: 'Logs',
 					component: Instance.Logs,
 					meta: {
+						renderMode: 'fixed',
 						useRootContext: true,
 						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Logs' }],
 					},

packages/ui/src/components/base/BaseTerminal.vue

@@ -189,14 +189,31 @@ function handleDocumentPointerDown(event: PointerEvent) {
 	terminal.value.clearSelection()
 }
 
+function handleDocumentKeyDown(event: KeyboardEvent) {
+	if (!event.metaKey || event.key.toLowerCase() !== 'a') return
+	const target = event.target as Node | null
+	const active = document.activeElement
+	if (
+		!(target && containerRef.value?.contains(target)) &&
+		!(active && containerRef.value?.contains(active))
+	) {
+		return
+	}
+
+	event.preventDefault()
+	terminal.value?.selectAll()
+}
+
 onMounted(() => {
 	window.addEventListener('resize', handleWindowResize)
 	document.addEventListener('pointerdown', handleDocumentPointerDown)
+	document.addEventListener('keydown', handleDocumentKeyDown, true)
 })
 
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', handleWindowResize)
 	document.removeEventListener('pointerdown', handleDocumentPointerDown)
+	document.removeEventListener('keydown', handleDocumentKeyDown, true)
 	if (resizeDebounce) clearTimeout(resizeDebounce)
 })
 

packages/ui/src/components/user/UserBadge.vue

@@ -38,7 +38,7 @@ const baseId = useId()
 		<template #popper>
 			<div class="flex flex-col max-w-[22rem] leading-tight gap-0.5">
 				<span class="text-contrast mb-1">{{ formatMessage(name, values) }}</span>
-				<span v-for="message of about" :key="message.id" class="text-primary">
+				<span v-for="message in about" :key="message.id" class="text-primary">
 					{{ formatMessage(message, values) }}
 				</span>
 				<span v-if="link" class="text-secondary text-xs opacity-80">

packages/ui/src/composables/terminal.ts

@@ -198,7 +198,12 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 			const mod = e.ctrlKey || e.metaKey
 			if (!mod) return true
 			const key = e.key.toLowerCase()
-			if (key === 'c' || key === 'insert' || key === 'a') {
+			if (key === 'a') {
+				e.preventDefault()
+				term.selectAll()
+				return false
+			}
+			if (key === 'c' || key === 'insert') {
 				return false
 			}
 			return true

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
-		<div class="flex flex-col gap-4">
+		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">
+			<div
-				<span class="text-2xl font-semibold text-contrast">Console</span>
+				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()