From 218df19d9c8b714a3667abd0edb9569af02ec100 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 4 Jun 2025 12:28:50 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=B9=E3=83=9E?=
 =?UTF-8?q?=E3=83=9B=E3=81=A7=E3=81=AEMkModalWindow=E3=81=AE=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=82=92=E6=9C=80=E9=81=A9=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkModalWindow.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index 0e274a0181..ef5ef2f053 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
-	<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }">
+<MkModal ref="modal" v-slot="{ type }" :preferType="deviceKind === 'smartphone' ? 'drawer' : 'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
+	<div ref="rootEl" :class="[$style.root, type === 'drawer' ? $style.asDrawer : null]" :style="{ width: type === 'drawer' ? '' : `${width}px`, height: type === 'drawer' ? '' : `min(${height}px, 100%)` }">
 		<div :class="$style.header">
 			<button v-if="withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button>
 			<span :class="$style.title">
@@ -30,6 +30,7 @@ import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { deviceKind } from '@/utility/device-kind.js';
 
 const props = withDefaults(defineProps<{
 	withOkButton?: boolean;
@@ -85,6 +86,11 @@ defineExpose({
 	@media (max-width: 500px) {
 		--root-margin: 16px;
 	}
+
+	&.asDrawer {
+		height: calc(100dvh - 30px);
+		border-radius: 0;
+	}
 }
 
 .header {