diff --git a/frontend/src/components/doc-content.vue b/frontend/src/components/doc-content.vue
index 29a7d1942..cc51c6f5d 100644
--- a/frontend/src/components/doc-content.vue
+++ b/frontend/src/components/doc-content.vue
@@ -849,7 +849,16 @@ const handleDetailsScroll = () => {
 @import "./css/markdown.less";
 
 :deep(.t-drawer .t-drawer__content-wrapper) {
-  width: 654px !important;
+  width: min(654px, 85vw) !important; // 减少到85%视口宽度，给左侧留更多空间
+  max-width: 654px !important;
+}
+
+// 在小屏幕上进一步调整
+@media (max-width: 768px) {
+  :deep(.t-drawer .t-drawer__content-wrapper) {
+    width: 90vw !important; // 小屏幕上使用90%宽度
+    max-width: none !important;
+  }
 }
 
 // 代码块样式
diff --git a/frontend/src/components/document-preview.vue b/frontend/src/components/document-preview.vue
index 0c6f54962..760b4dfc8 100644
--- a/frontend/src/components/document-preview.vue
+++ b/frontend/src/components/document-preview.vue
@@ -670,6 +670,34 @@ onUnmounted(() => {
 
 :deep(.docx-preview-wrapper) {
   padding: 20px;
+  max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: auto; // 如果内容过宽，允许水平滚动而不是溢出
+  
+  // 约束所有子元素的宽度
+  * {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  
+  // 特别处理表格
+  table {
+    width: 100%;
+    table-layout: auto;
+    word-wrap: break-word;
+  }
+  
+  // 处理图片
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  // 处理可能的固定宽度元素
+  [style*="width"] {
+    max-width: 100% !important;
+  }
 }
 
 :deep(.vue-office-pptx) {