refactor: improve the content area width of the editor for low-resolution screens (#6175)

#### 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
优化文章编辑器内容区域在低分屏下的表现。
```
pull/6185/head
Ryan Wang 2024-06-27 17:46:54 +08:00 committed by GitHub
parent ab14157def
commit 4d22bc3bbb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 17 deletions

View File

@ -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;
}