feat: Allow for adjustable alignment of main content on certain pages for content moderators (#7034)

* Add type safety and validation for moderation settings

* Add ability for moderators to adjust page layout for discover, project, moderation pages

Primarily for changes to have more tooling present without overlapping important info

apps/frontend/src/assets/styles/layout.scss

@@ -111,6 +111,18 @@
 				max-width: 100%;
 			}
 		}
+
+		&.align-x {
+			margin: 0 auto;
+		}
+
+		&.align-l {
+			margin: 0 0 0 auto;
+		}
+
+		&.align-r {
+			margin: 0 auto 0 0;
+		}
 	}
 
 	.normal-page__sidebar {
@@ -140,6 +152,18 @@
 		'sidebar'
 		/ 100%;
 
+	&.align-x {
+		margin: 0 auto;
+	}
+
+	&.align-l {
+		margin: 0 0 0 auto;
+	}
+
+	&.align-r {
+		margin: 0 auto 0 0;
+	}
+
 	@media screen and (min-width: 1024px) {
 		&.sidebar {
 			grid-template:

apps/frontend/src/pages/[type]/[project].vue

@@ -4,7 +4,7 @@
 			<ProjectBackgroundGradient :project="project" />
 		</Teleport>
 		<template v-if="isSettings">
-			<div v-if="canAccessSettings" class="normal-page no-sidebar">
+			<div v-if="canAccessSettings" class="normal-page no-sidebar" :class="`align-${marginTarget}`">
 				<div class="normal-page__header">
 					<div
 						class="mb-4 flex flex-wrap items-center gap-x-2 gap-y-3 border-0 border-b-[1px] border-solid border-divider pb-4 text-lg font-semibold"
@@ -94,17 +94,20 @@
 			/>
 			<div
 				class="new-page sidebar"
-				:class="{
-					'alt-layout': cosmetics.leftContentLayout,
-					'checklist-open':
-						showModerationChecklist &&
-						!collapsedModerationChecklist &&
-						!flags.alwaysShowChecklistAsPopup,
-					'checklist-collapsed':
-						showModerationChecklist &&
-						collapsedModerationChecklist &&
-						!flags.alwaysShowChecklistAsPopup,
-				}"
+				:class="[
+					{
+						'alt-layout': cosmetics.leftContentLayout,
+						'checklist-open':
+							showModerationChecklist &&
+							!collapsedModerationChecklist &&
+							!flags.alwaysShowChecklistAsPopup,
+						'checklist-collapsed':
+							showModerationChecklist &&
+							collapsedModerationChecklist &&
+							!flags.alwaysShowChecklistAsPopup,
+					},
+					`align-${marginTarget}`,
+				]"
 			>
 				<div
 					class="normal-page__header relative mb-4"
@@ -511,7 +514,7 @@ import {
 	SettingsIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { moderationSettings } from '@modrinth/moderation'
+import { getMarginTarget, moderationSettings } from '@modrinth/moderation'
 import {
 	Admonition,
 	Avatar,
@@ -583,6 +586,7 @@ const config = useRuntimeConfig()
 const moderationQueue = useModerationQueue()
 const keybinds = useModerationKeybinds()
 const modSettings = useModerationSettings()
+const marginTarget = computed(() => getMarginTarget(modSettings.value))
 const notifications = injectNotificationManager()
 const { addNotification } = notifications
 

apps/frontend/src/pages/discover.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import { getMarginTarget } from '@modrinth/moderation'
 import { commonProjectTypeCategoryMessages, NavTabs, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 
 const flags = useFeatureFlags()
 const route = useRoute()
+const modSettings = useModerationSettings()
 
 const allowTabChanging = computed(() => !route.query.sid)
+const marginTarget = computed(() => getMarginTarget(modSettings.value))
 
 const selectableProjectTypes = [
 	{
@@ -47,7 +50,10 @@ const selectableProjectTypes = [
 ]
 </script>
 <template>
-	<div class="mx-auto box-border flex w-full max-w-[1280px] flex-col gap-4 px-6 pb-6">
+	<div
+		class="box-border flex w-full max-w-[1280px] flex-col gap-4 px-6 pb-6"
+		:class="`m${marginTarget}-auto`"
+	>
 		<NavTabs
 			v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
 			:links="selectableProjectTypes"

apps/frontend/src/pages/moderation.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6">
+	<div
+		class="relativemb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
+		:class="`m${marginTarget}-auto`"
+	>
 		<h1>Moderation</h1>
 		<NavTabs :links="moderationLinks" class="mb-4 hidden sm:flex" />
 		<div class="mb-4 sm:hidden">
@@ -16,6 +19,7 @@
 
 <script setup lang="ts">
 import { FolderIcon, GlobeIcon, HashIcon, ReportIcon, ShieldCheckIcon } from '@modrinth/assets'
+import { getMarginTarget } from '@modrinth/moderation'
 import { Chips, defineMessages, NavTabs, useVIntl } from '@modrinth/ui'
 
 definePageMeta({
@@ -30,6 +34,9 @@ const { formatMessage } = useVIntl()
 const route = useRoute()
 const router = useRouter()
 
+const modSettings = useModerationSettings()
+const marginTarget = computed(() => getMarginTarget(modSettings.value))
+
 const messages = defineMessages({
 	projectsTitle: {
 		id: 'moderation.page.projects',