From c5fd36094d8208cd107d73e076eaaa6aa9e8cf70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 22 Mar 2026 13:32:45 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=A6=E3=82=A3?=
 =?UTF-8?q?=E3=83=B3=E3=83=89=E3=82=A6=E3=81=AE=E5=88=9D=E6=9C=9F=E3=82=B5?=
 =?UTF-8?q?=E3=82=A4=E3=82=BA=E3=82=92=E7=94=BB=E9=9D=A2=E3=82=B5=E3=82=A4?=
 =?UTF-8?q?=E3=82=BA=E3=81=8B=E3=82=89=E5=8B=95=E7=9A=84=E3=81=AB=E6=B1=BA?=
 =?UTF-8?q?=E3=82=81=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(#17257)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): ウィンドウの初期サイズを画面サイズから動的に決めるように

* Update Changelog

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 .../frontend/src/components/MkDriveWindow.vue |  2 --
 .../frontend/src/components/MkPageWindow.vue  |  2 --
 packages/frontend/src/components/MkWindow.vue | 22 ++++++++++++++-----
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ca02a2982..9ab691e32d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - 依存関係の更新
 
 ### Client
+- Enhance: アプリ内ウィンドウの初期サイズを画面サイズに応じて自動で調整するように
 - Fix: 絵文字パレットが空の状態でMisskeyについてのページが閲覧できない問題を修正
 - Fix: ウィンドウのタイトルをクリックしても最前面に出ないことがある問題を修正
 
diff --git a/packages/frontend/src/components/MkDriveWindow.vue b/packages/frontend/src/components/MkDriveWindow.vue
index 0b8d0bfb8a..becf36cad8 100644
--- a/packages/frontend/src/components/MkDriveWindow.vue
+++ b/packages/frontend/src/components/MkDriveWindow.vue
@@ -6,8 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkWindow
 	ref="window"
-	:initialWidth="800"
-	:initialHeight="500"
 	:canResize="true"
 	@closed="emit('closed')"
 >
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index d21e09a984..4b6467fdda 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -6,8 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkWindow
 	ref="windowEl"
-	:initialWidth="500"
-	:initialHeight="500"
 	:canResize="true"
 	:closeButton="true"
 	:buttonsLeft="buttonsLeft"
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index f771c8b580..0545352652 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -106,8 +106,8 @@ function capturePointer(evt: PointerEvent) {
 }
 
 const props = withDefaults(defineProps<{
-	initialWidth: number;
-	initialHeight: number | null;
+	initialWidth?: number | null;
+	initialHeight?: number | null;
 	canResize?: boolean;
 	closeButton?: boolean;
 	mini?: boolean;
@@ -116,7 +116,7 @@ const props = withDefaults(defineProps<{
 	buttonsLeft?: WindowButton[];
 	buttonsRight?: WindowButton[];
 }>(), {
-	initialWidth: 400,
+	initialWidth: null,
 	initialHeight: null,
 	canResize: false,
 	closeButton: true,
@@ -131,6 +131,12 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
+const INITIAL_WINDOW_WIDTH_RATIO = 0.5;
+const INITIAL_WINDOW_HEIGHT_RATIO = 0.75;
+const INITIAL_WINDOW_WIDTH_MIN = 400; // スクリーンの最小幅に合わせるのはapplyTransormWidthの担当
+const INITIAL_WINDOW_WIDTH_MAX = 1000; // 画面幅いっぱいに広がるのを防止するための最大幅
+const INITIAL_WINDOW_HEIGHT_MIN = 500; // スクリーンの最小幅に合わせるのはapplyTransormHeightの担当
+
 provide('inWindow', true);
 
 const rootEl = useTemplateRef('rootEl');
@@ -484,8 +490,14 @@ function onBrowserResize() {
 }
 
 onMounted(() => {
-	applyTransformWidth(props.initialWidth);
-	if (props.initialHeight) applyTransformHeight(props.initialHeight);
+	let initialWidth = props.initialWidth;
+	let initialHeight = props.initialHeight;
+
+	if (initialWidth == null) initialWidth = Math.min(Math.max(Math.round(window.innerWidth * INITIAL_WINDOW_WIDTH_RATIO), INITIAL_WINDOW_WIDTH_MIN), INITIAL_WINDOW_WIDTH_MAX);
+	if (initialHeight == null) initialHeight = Math.max(Math.round(window.innerHeight * INITIAL_WINDOW_HEIGHT_RATIO), INITIAL_WINDOW_HEIGHT_MIN);
+
+	applyTransformWidth(initialWidth);
+	applyTransformHeight(initialHeight);
 
 	if (rootEl.value) {
 		applyTransformTop((window.innerHeight / 2) - (rootEl.value.offsetHeight / 2));