enhance(client): MkDialogボタンが3つ以上ある場合、並べ替えを変更するように

CHANGELOG_CHERRYPICK.md

@@ -43,6 +43,7 @@
 - 노트 작성 폼 개선
 	- 내용이 너무 길면 스크롤 가능하도록
   - 브라우저의 최대 높이를 초과하지 않도록
+- MkDialog 버튼이 3개 이상이면 정렬을 변경하도록
 - Fix: 그룹 초대 알림 아이콘이 잘못 표시되는 문제
 - Fix: 노트 디자인이 올바르지 않게 표시되는 문제
 - Fix: 프로필 아이콘이 투명일 때 노트 답글선이 비치는 문제

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>