feat: add moderation checklist back to project page (#5814)

* fix: billing page server plan heading

* fix: matching server page spacing with instance page

* feat: update server header buttons

* feat: add show ram as bytes always on

* fix: revert to large buttons

* feat: add hostname and server states in info card

* feat: add publishing checklist to project page

* fix: markdown table style and max width

* fix: teleport overflow menu bad anchoring

packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue

@@ -2,7 +2,7 @@
 	<div
 		data-pyro-server-stats
 		style="font-variant-numeric: tabular-nums"
-		class="flex select-none flex-col items-center gap-4 md:flex-row"
+		class="flex select-none flex-col items-center gap-3 md:flex-row"
 		:class="{ 'pointer-events-none': loading }"
 		:aria-hidden="loading"
 	>
@@ -60,11 +60,12 @@ import { useStorage } from '@vueuse/core'
 import { computed, defineAsyncComponent, ref, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
-import { injectModrinthServerContext } from '#ui/providers'
+import { injectModrinthServerContext, injectPageContext } from '#ui/providers'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
 const { serverId } = injectModrinthServerContext()
+const { featureFlags } = injectPageContext()
 
 const props = withDefaults(
 	defineProps<{
@@ -83,6 +84,9 @@ const chartsReady = ref(new Set<number>())
 const userPreferences = useStorage(`pyro-server-${serverId || 'unknown'}-preferences`, {
 	ramAsNumber: false,
 })
+const isRamAsBytesForcedByFeatureFlag = computed(
+	() => featureFlags?.serverRamAsBytesAlwaysOn?.value ?? false,
+)
 
 const stats = shallowRef(
 	props.data?.current || {
@@ -214,7 +218,9 @@ const metrics = computed(() => {
 		{
 			title: 'Memory',
 			value:
-				props.showMemoryAsBytes || userPreferences.value.ramAsNumber
+				props.showMemoryAsBytes ||
+				isRamAsBytesForcedByFeatureFlag.value ||
+				userPreferences.value.ramAsNumber
 					? formatBytes(stats.value.ram_usage_bytes ?? 0)
 					: `${ramPercent.value.toFixed(2)}%`,
 			icon: DatabaseIcon,

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

@@ -1,12 +1,12 @@
 <template>
 	<div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
-		<div class="flex flex-col gap-6">
+		<div class="flex flex-col gap-4">
 			<ServerManageStats
 				:data="!isWsAuthIncorrect ? stats : undefined"
 				:loading="isWsAuthIncorrect"
 			/>
 
-			<div class="flex min-h-[700px] flex-col gap-4">
+			<div class="flex min-h-[700px] flex-col gap-2">
 				<span class="text-2xl font-semibold text-contrast">Console</span>
 
 				<ConsolePageLayout />

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

@@ -107,7 +107,7 @@
 	<div
 		v-else-if="serverData"
 		data-pyro-server-manager-root
-		class="experimental-styles-within relative mx-auto pb-12 box-border flex min-h-[calc(100svh-100px)] w-full min-w-0 flex-col gap-6 px-6 transition-all duration-300"
+		class="experimental-styles-within relative mx-auto pb-12 box-border flex min-h-[calc(100svh-100px)] w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
 		:style="{
 			'--server-bg-image': serverImage
 				? `url(${serverImage})`