From 4d22bc3bbb8ca2660b47e038060e85a6a6936a16 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 27 Jun 2024 17:46:54 +0800
Subject: [PATCH] refactor: improve the content area width of the editor for
 low-resolution screens (#6175)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/area editor
/kind improvement
/milestone 2.17.x

#### What this PR does / why we need it:

优化文章编辑器内容区域在低分屏下的表现。

默认：

<img width="1898" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/bfca69e5-29cf-45d9-8757-0952fd2a129c">


小屏幕：

<img width="1043" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/88efbeed-fe0c-4b78-b435-f6352dbd8d27">


#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/6172

#### Special notes for your reviewer:

建议测试在各个屏幕下的表现。

#### Does this PR introduce a user-facing change?

```release-note
优化文章编辑器内容区域在低分屏下的表现。
```
---
 ui/packages/editor/src/styles/base.scss | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/ui/packages/editor/src/styles/base.scss b/ui/packages/editor/src/styles/base.scss
index 69ad677f7..7c0543db5 100644
--- a/ui/packages/editor/src/styles/base.scss
+++ b/ui/packages/editor/src/styles/base.scss
@@ -1,6 +1,6 @@
 .halo-rich-text-editor {
   $editorVerticalPadding: 15px;
-  $editorHorizontalPadding: 20%;
+  $editorContentMaxWidth: 64rem;
 
   box-sizing: border-box;
   height: calc(100% - 48px);
@@ -11,8 +11,9 @@
   }
 
   .editor-header-extra {
-    width: 100%;
-    padding: $editorVerticalPadding 20px;
+    padding: $editorVerticalPadding 1rem;
+    max-width: $editorContentMaxWidth;
+    margin: 0 auto;
   }
 
   .editor-content {
@@ -21,7 +22,9 @@
 
     .ProseMirror {
       outline: none !important;
-      padding: $editorVerticalPadding 20px;
+      padding: $editorVerticalPadding 1rem;
+      max-width: $editorContentMaxWidth;
+      margin: 0 auto;
 
       p {
         margin-top: 0.75em;
@@ -82,19 +85,6 @@
     }
   }
 
-  @media screen {
-    .ProseMirror,
-    .editor-header-extra {
-      @media (min-width: 640px) {
-        padding: $editorVerticalPadding min($editorHorizontalPadding, 10%) !important;
-      }
-
-      @media (min-width: 1024px) {
-        padding: $editorVerticalPadding $editorHorizontalPadding !important;
-      }
-    }
-  }
-
   .v-popper--theme-tooltip {
     pointer-events: all;
   }