fix(frontend): 長い文章を投稿する際、プレビューが画面からはみ出る問題を修正

Fix #11186

Cherry-picks: 6a015341ef

CHANGELOG.md

@@ -19,6 +19,7 @@
 ### Client
 - 画像を動画と同様に簡単に隠せるように
 - フォローやお気に入り登録をしていないチャンネルを開く時は概要ページを開くように
+- Fix: 長い文章を投稿する際、プレビューが画面からはみ出る問題を修正
 
 ### Server
 

packages/frontend/src/components/MkPostForm.vue

@@ -1015,6 +1015,8 @@ defineExpose({
 
 .preview {
 	padding: 16px 20px 0 20px;
+	max-height: 150px;
+	overflow: auto;
 }
 
 .targetNote {

packages/frontend/src/components/MkPostFormDialog.vue

@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :preferType="'dialog'" @click="modal.close()" @closed="onModalClosed()">
-	<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freezeAfterPosted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/>
+	<MkPostForm ref="form" :class="$style.form" v-bind="props" autofocus freezeAfterPosted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/>
 </MkModal>
 </template>
 
@@ -44,3 +44,10 @@ function onModalClosed() {
 	emit('closed');
 }
 </script>
+
+<style lang="scss" module>
+.form {
+	max-height: 100%;
+	margin: 0 auto auto auto;
+}
+</style>