fix(component): contain quill editor within viewport

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);

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 {