From 8f549acb61b41ed141d9eadc525f733edc518918 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 23 Jun 2023 19:00:59 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20MkDialog=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=81=8C3=E3=81=A4=E4=BB=A5=E4=B8=8A=E3=81=82?=
 =?UTF-8?q?=E3=82=8B=E5=A0=B4=E5=90=88=E3=80=81=E4=B8=A6=E3=81=B9=E6=9B=BF?=
 =?UTF-8?q?=E3=81=88=E3=82=92=E5=A4=89=E6=9B=B4=E3=81=99=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       | 1 +
 packages/frontend/src/components/MkDialog.vue | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index e8ba070304..fc82fe9b18 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -43,6 +43,7 @@
 - 노트 작성 폼 개선
 	- 내용이 너무 길면 스크롤 가능하도록
   - 브라우저의 최대 높이를 초과하지 않도록
+- MkDialog 버튼이 3개 이상이면 정렬을 변경하도록
 - Fix: 그룹 초대 알림 아이콘이 잘못 표시되는 문제
 - Fix: 노트 디자인이 올바르지 않게 표시되는 문제
 - Fix: 프로필 아이콘이 투명일 때 노트 답글선이 비치는 문제
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index 4d5df0bba4..5821215c08 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -43,7 +43,7 @@
 			<MkButton v-if="showOkButton" data-cy-modal-dialog-ok inline primary rounded :autofocus="!input && !select" :disabled="okButtonDisabled" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
 			<MkButton v-if="showCancelButton || input || select" data-cy-modal-dialog-cancel inline rounded @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
 		</div>
-		<div v-if="actions" :class="$style.buttons">
+		<div v-if="actions" :class="[$style.buttons, { [$style.changeButtonAlign]: actions.length > 2 }]">
 			<MkButton v-for="action in actions" :key="action.text" inline rounded :primary="action.primary" :danger="action.danger" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
 		</div>
 	</div>
@@ -243,5 +243,9 @@ onBeforeUnmount(() => {
 	gap: 8px;
 	flex-wrap: wrap;
 	justify-content: center;
+
+	&.changeButtonAlign {
+		flex-direction: column;
+	}
 }
 </style>