diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index 871f8d4f6..bd6ac02cc 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -63,17 +63,17 @@ let transformOrigin = $ref('center');
 let showing = $ref(true);
 let content = $ref<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
-let type = $ref<ModalTypes>();
-console.log(props.preferType, isTouchUsing, deviceKind);
-if (props.preferType === 'auto') {
-	if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
-		type = 'drawer';
+const type = $computed<ModalTypes>(() => {
+	if (props.preferType === 'auto') {
+		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
+			return 'drawer';
+		} else {
+			return props.src != null ? 'popup' : 'dialog';
+		}
 	} else {
-		type = props.src != null ? 'popup' : 'dialog';
+		return props.preferType!;
 	}
-} else {
-	type = props.preferType!;
-}
+});
 let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : '');
 let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0);
 
@@ -369,10 +369,6 @@ defineExpose({
 		}
 	}
 
-	> .content {
-		container-type: inline-size;
-	}
-
 	&.dialog {
 		> .content {
 			position: fixed;
@@ -387,6 +383,7 @@ defineExpose({
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
 			overflow: auto;
 			display: flex;
+			container-type: inline-size;
 
 			@media (max-width: 500px) {
 				padding: 16px;