merge: Fix admin-user / instance-info styling and broken controls (!1106)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1106

Approved-by: Marie <github@yuugi.dev>
Approved-by: dakkar <dakkar@thenautilus.net>

packages/frontend/src/components/MkAbuseReport.vue

@@ -118,9 +118,12 @@ import { misskeyApi } from '@/utility/misskey-api';
 import AdminUser from '@/pages/admin-user.vue';
 import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	report: Misskey.entities.AdminAbuseUserReportsResponse[number];
-}>();
+	metaHint?: Misskey.entities.AdminMetaResponse | undefined;
+}>(), {
+	metaHint: undefined,
+});
 
 const emit = defineEmits<{
 	(ev: 'resolved', reportId: string): void;
@@ -134,7 +137,6 @@ reporterRouter.init();
 */
 
 const parsedComment = computed(() => mfm.parse(props.report.comment));
-const metaHint = ref<Misskey.entities.AdminMetaResponse | undefined>(undefined);
 
 const targetInstanceIcon = computed(() => props.report.targetInstance?.faviconUrl
 	? getProxiedImageUrlNullable(props.report.targetInstance.faviconUrl, 'preview')
@@ -142,12 +144,6 @@ const targetInstanceIcon = computed(() => props.report.targetInstance?.faviconUr
 		? getProxiedImageUrlNullable(props.report.targetInstance.iconUrl, 'preview')
 		: null);
 
-if (iAmAdmin) {
-	misskeyApi('admin/meta')
-		.then(meta => metaHint.value = meta)
-		.catch(err => console.error('[MkAbuseReport] Error fetching meta:', err));
-}
-
 const moderationNote = ref(props.report.moderationNote ?? '');
 
 watch(moderationNote, async () => {

packages/frontend/src/pages/admin-user.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
+<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
 	<FormSuspense v-if="init" :p="init">
 		<div v-if="user && info">
 			<div v-if="tab === 'overview'" class="_gaps">

packages/frontend/src/pages/admin/abuses.vue

@@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" :displayLimit="50">
 				<SkDateSeparatedList v-slot="{ item: report }" :items="items">
-					<XAbuseReport :report="report" @resolved="resolved"/>
+					<XAbuseReport :report="report" :metaHint="metaHint" @resolved="resolved"/>
 				</SkDateSeparatedList>
 			</MkPagination>
 		</div>
@@ -59,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, useTemplateRef, ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkSelect from '@/components/MkSelect.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import XAbuseReport from '@/components/MkAbuseReport.vue';
@@ -68,6 +69,8 @@ import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import { store } from '@/store.js';
 import SkDateSeparatedList from '@/components/SkDateSeparatedList.vue';
+import { iAmAdmin } from '@/i';
+import { misskeyApi } from '@/utility/misskey-api';
 
 const reports = useTemplateRef('reports');
 
@@ -77,6 +80,14 @@ const targetUserOrigin = ref('combined');
 const searchUsername = ref('');
 const searchHost = ref('');
 
+const metaHint = ref<Misskey.entities.AdminMetaResponse | undefined>(undefined);
+
+if (iAmAdmin) {
+	misskeyApi('admin/meta')
+		.then(meta => metaHint.value = meta)
+		.catch(err => console.error('[MkAbuseReport] Error fetching meta:', err));
+}
+
 const pagination = {
 	endpoint: 'admin/abuse-user-reports' as const,
 	limit: 10,

packages/frontend/src/pages/instance-info.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
+<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
 	<div v-if="instance">
 		<!-- This empty div is preserved to avoid merge conflicts -->
 		<div>

packages/frontend/src/style.scss

@@ -211,7 +211,9 @@ rt {
 	max-width: min(var(--MI_SPACER-w, 100%), calc(100% - (var(--MI_SPACER-max, 24px) * 2)));
 	margin: var(--MI_SPACER-max, 24px) auto;
 	container-type: inline-size;
+}
 
+._spacer > * {
 	/* 子に継承させない */
 	--MI_SPACER-w: initial;
 	--MI_SPACER-min: initial;