🎨

packages/frontend/src/components/MkAbuseReportWindow.vue

@@ -1,5 +1,5 @@
 <template>
-<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
+<MkWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
 	<template #header>
 		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
@@ -8,24 +8,26 @@
 			</template>
 		</I18n>
 	</template>
-	<div class="dpvffvvy _autoGap">
-		<div class="">
-			<MkTextarea v-model="comment">
-				<template #label>{{ i18n.ts.details }}</template>
-				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
-			</MkTextarea>
+	<MkSpacer :margin-min="20" :margin-max="28">
+		<div class="dpvffvvy _autoGap">
+			<div class="">
+				<MkTextarea v-model="comment">
+					<template #label>{{ i18n.ts.details }}</template>
+					<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
+				</MkTextarea>
+			</div>
+			<div class="">
+				<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
+			</div>
 		</div>
-		<div class="">
-			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
-		</div>
-	</div>
-</XWindow>
+	</MkSpacer>
+</MkWindow>
 </template>
 
 <script setup lang="ts">
 import { ref, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import XWindow from '@/components/MkWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
@@ -40,7 +42,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const uiWindow = shallowRef<InstanceType<typeof XWindow>>();
+const uiWindow = shallowRef<InstanceType<typeof MkWindow>>();
 const comment = ref(props.initialComment || '');
 
 function send() {

packages/frontend/src/components/MkDriveWindow.vue

@@ -1,5 +1,5 @@
 <template>
-<XWindow
+<MkWindow
 	ref="window"
 	:initial-width="800"
 	:initial-height="500"
@@ -10,14 +10,14 @@
 		{{ i18n.ts.drive }}
 	</template>
 	<XDrive :initial-folder="initialFolder"/>
-</XWindow>
+</MkWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
 import XDrive from '@/components/MkDrive.vue';
-import XWindow from '@/components/MkWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import { i18n } from '@/i18n';
 
 defineProps<{

packages/frontend/src/components/MkPageWindow.vue

@@ -1,5 +1,5 @@
 <template>
-<XWindow
+<MkWindow
 	ref="windowEl"
 	:initial-width="500"
 	:initial-height="500"
@@ -20,13 +20,13 @@
 	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }" style="container-type: inline-size;">
 		<RouterView :router="router"/>
 	</div>
-</XWindow>
+</MkWindow>
 </template>
 
 <script lang="ts" setup>
 import { ComputedRef, inject, provide } from 'vue';
 import RouterView from '@/components/global/RouterView.vue';
-import XWindow from '@/components/MkWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';
@@ -47,7 +47,7 @@ defineEmits<{
 const router = new Router(routes, props.initialPath);
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let windowEl = $shallowRef<InstanceType<typeof XWindow>>();
+let windowEl = $shallowRef<InstanceType<typeof MkWindow>>();
 const history = $ref<{ path: string; key: any; }[]>([{
 	path: router.getCurrentPath(),
 	key: router.getCurrentKey(),

packages/frontend/src/components/MkWindow.vue

@@ -489,6 +489,7 @@ defineExpose({
 			flex: 1;
 			overflow: auto;
 			background: var(--panel);
+			container-type: inline-size;
 		}
 	}
 

packages/frontend/src/components/MkYoutubePlayer.vue

@@ -1,5 +1,5 @@
 <template>
-<XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
+<MkWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
 	<template #header>
 		<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
 		<span>{{ title ?? 'YouTube' }}</span>
@@ -14,11 +14,11 @@
 		<MkLoading v-if="fetching"/>
 		<MkError v-else-if="!player.url" @retry="ytFetch()"/>
 	</div>
-</XWindow>
+</MkWindow>
 </template>
 
 <script lang="ts" setup>
-import XWindow from '@/components/MkWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import { versatileLang } from '@/scripts/intl-const';
 
 const props = defineProps<{