From 34b48568ad3db1560bc451f91785924955d8328a Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Wed, 12 Aug 2026 18:37:06 +0800
Subject: [PATCH] fix(component): contain quill editor within viewport

---
 src/components/QuillEditor.vue        | 24 ++++++++++++++++++++++++
 src/views/admin/ArticleEditorView.vue |  7 +++++++
 2 files changed, 31 insertions(+)

diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue
index c747a41..002a7d2 100644
--- a/src/components/QuillEditor.vue
+++ b/src/components/QuillEditor.vue
@@ -136,11 +136,18 @@ watch(() => props.modelValue, (val) => {
 <style scoped>
 .quill-wrap {
   background: var(--ac-bg-card, #fff);
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  overflow-x: auto;
 }
 
 .quill-editor {
   min-height: 400px;
   background: var(--ac-bg-card, #fff);
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .code-lang-bar {
@@ -178,6 +185,11 @@ watch(() => props.modelValue, (val) => {
   min-height: 400px;
   font-size: 16px;
   line-height: 1.8;
+  min-width: 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 .quill-editor :deep(.ql-toolbar) {
   border-color: var(--ac-border);
@@ -185,6 +197,18 @@ watch(() => props.modelValue, (val) => {
 }
 .quill-editor :deep(.ql-container) {
   border-color: var(--ac-border);
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.quill-editor :deep(.ql-code-block-container) {
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre;
+}
+.quill-editor :deep(.ql-code-block) {
+  white-space: pre;
+  word-break: normal;
 }
 .quill-editor :deep(.ql-editor.ql-blank::before) {
   color: var(--ac-text-disabled);
diff --git a/src/views/admin/ArticleEditorView.vue b/src/views/admin/ArticleEditorView.vue
index d400670..6d1f62c 100644
--- a/src/views/admin/ArticleEditorView.vue
+++ b/src/views/admin/ArticleEditorView.vue
@@ -371,6 +371,9 @@ onBeforeUnmount(() => {
 <style scoped>
 .editor-wrapper {
   max-width: 1200px;
+  width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
 }
 
 .editor-header {
@@ -418,14 +421,18 @@ onBeforeUnmount(() => {
   display: flex;
   gap: 24px;
   align-items: flex-start;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .editor-main {
   flex: 1;
   min-width: 0;
+  max-width: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px;
+  overflow-x: auto;
 }
 
 .title-input {