Skip to content

fix: 修复移动端代码块横向滚动崩坏问题 #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
one-ea wants to merge 5 commits into from
Closed

fix: 修复移动端代码块横向滚动崩坏问题 #39

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cf4e559
fix(security): harden Monolith against XSS, SSRF, info leaks, and abuse
one-ea Apr 19, 2026
cc9bb93
feat(privacy): add cookie consent banner, privacy policy page, and GD…
one-ea Apr 19, 2026
a1535af
Merge remote-tracking branch 'origin/main' into dev
one-ea Apr 19, 2026
4185e93
fix: 修复移动端代码块横向滚动崩坏问题
one-ea Apr 19, 2026
a36ddd9
fix: 修复代码块布局坍塌（移除循环宽度依赖）
one-ea Apr 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions client/src/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,35 +413,43 @@
background: oklch(0.15 0.006 220) !important;
border: 1px solid oklch(1 0 0 / 6%);
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
}

.prose-monolith .code-block-wrapper pre {
margin: 0;
padding: 16px 20px;
padding: 14px 24px;
border-radius: 0;
border: none;
/* 不在 pre 层裁剪，由 wrapper 统一负责横向滚动 */
overflow-x: visible;
/* 强制不换行，让内容真实撑开 wrapper */
white-space: pre;
font-size: 13px;
line-height: 1.85;
letter-spacing: 0;
font-family: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
}

/* 移动端代码块右侧留白增强 */
@media (max-width: 768px) {
.prose-monolith .code-block-wrapper pre {
padding-right: 24px;
padding: 12px 16px;
/* 移动端：确保 pre 宽度可以超出 wrapper，由 wrapper 滚动 */
width: max-content;
min-width: 100%;
}
}
Comment on lines 419 to 441

@coderabbitai coderabbitai Bot Apr 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

滚动末端右内边距丢失的潜在视觉问题

.code-block-wrapper 负责横向滚动，而子 pre 设置了 padding: 14px 24px（移动端 12px 16px）。由于内部 code 的 width: max-content 会让内容溢出 pre，滚动容器是 wrapper，滚到最右端时 pre 的右内边距不会跟随内容出现在视口末尾——末行右侧会紧贴 wrapper 边缘，缺少 24px/16px 的呼吸空间。这是 overflow-x: auto 容器 + 内部盒 padding 的经典问题。

如果希望右侧保留一致的留白，可以把横向 padding 从 pre 移到 wrapper，或者在 code 上使用 padding-right / box-shadow 兜住末端。示意：

♻️ 一种可选修正（任选其一即可） 
 .prose-monolith .code-block-wrapper pre {
   margin: 0;
-  padding: 14px 24px;
+  padding: 14px 0;
   ...
 }
+.prose-monolith .code-block-wrapper pre code {
+  padding-right: 24px;
+}

桌面端与亮/暗色模式下行为一致，不影响主题变量配对。可按需采用。

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@client/src/globals.css` around lines 419 - 441, The pre element inside
.prose-monolith .code-block-wrapper currently holds horizontal padding which is
lost when content overflows and the wrapper scrolls; update styles so the scroll
container (.code-block-wrapper) provides the left/right padding instead of the
inner pre (or alternatively add padding-right to the overflowing inner element
such as the code tag or a right-side box-shadow on code). Concretely: remove or
reduce horizontal padding from .prose-monolith .code-block-wrapper pre and apply
equivalent padding to .code-block-wrapper (and for mobile adjust the wrapper
padding to match 12px/16px), or add a padding-right on the inner code element
(the element using width: max-content) so the visual right gutter remains when
scrolled to the end.


/* 独立 pre 兜底样式（不在 code-block-wrapper 内时） */
.prose-monolith pre:not(.hljs) {
margin: 24px 0;
padding: 16px 20px;
padding: 14px 24px;
border-radius: 8px;
background: oklch(0.15 0.006 220) !important;
border: 1px solid oklch(1 0 0 / 6%);
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
white-space: pre; /* 强制不换行 */
font-size: 13px;
line-height: 1.85;
letter-spacing: 0;
Expand Down Expand Up @@ -650,17 +658,17 @@
/* 代码行布局 */
.prose-monolith pre code .code-line {
display: inline-block;
min-width: 100%;
padding: 0 4px;
margin: 0 -4px;
border-radius: 2px;
/* min-width 由 code 元素的 white-space:pre 自然撑开，不在此设置避免循环依赖 */
}
Comment on lines 659 to 665

@coderabbitai coderabbitai Bot Apr 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# 首先查看globals.css文件的662-671行及周围上下文
cat -n client/src/globals.css | sed -n '655,680p'

Repository: one-ea/Monolith

Length of output: 817

🏁 Script executed:

# 搜索相关的选择器定义
rg -n "\.code-line|\.line-highlight|\.diff-add|\.diff-del" client/src/globals.css -B2 -A2

Repository: one-ea/Monolith

Length of output: 1484

🏁 Script executed:

# 查找主题变量定义
rg -n "\[data-theme|--.*-bg|--.*-highlight" client/src/globals.css | head -20

Repository: one-ea/Monolith

Length of output: 1377

🏁 Script executed:

# 搜索所有包含 .code-line 的选择器定义
rg -n "\.code-line" client/src/globals.css -A3

Repository: one-ea/Monolith

Length of output: 350

🏁 Script executed:

# 检查是否有其他暗色主题下但未在亮色主题中定义的选择器
rg -n "\.prose-monolith pre code" client/src/globals.css | grep -v "data-theme" | head -30

Repository: one-ea/Monolith

Length of output: 304

🏁 Script executed:

# 检查亮色主题下 .prose-monolith pre code 相关的所有定义
rg -n "\[data-theme=\"light\"\].*\.prose-monolith.*code" client/src/globals.css -A2

Repository: one-ea/Monolith

Length of output: 2197

.code-line 改为 block 解决了移动端宽度计算问题，但需注意多行高亮的右端对齐

从 inline-block 改为 block，结合 width: max-content 和 min-width: calc(100% + 8px) 的方案正确。需留意当 .line-highlight / .diff-add / .diff-del 跨越多行且各行长度不等时，高亮背景右边缘会根据每行自身内容宽度参差不齐——短行的高亮仅被 min-width 拉伸到容器宽度，长行超出时高亮只会铺到行末尾。横向滚动时视觉可能产生"断层感"。

如需统一对齐到最宽行，可考虑在父级 code 使用 display: table 或在 .code-line 用 display: table-row，但需权衡改动范围。

亮色主题的高亮颜色（.line-highlight / .diff-add / .diff-del）已完整覆盖，OKLCH 色值合理。建议在移动设备上用包含多行差异代码的块实测高亮背景效果。

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@client/src/globals.css` around lines 662 - 671, The current .code-line uses
display: block with width: max-content and min-width calc(100% + 8px), which
causes multi-line highlights (.line-highlight, .diff-add, .diff-del) to
right-align unevenly when lines have different lengths; to fix, make the code
container align highlight widths by changing the parent code element to display:
table (so rows can share a common width) or change .code-line to display:
table-row and keep its inner content as table-cell, ensuring min-width behavior
is preserved; update the CSS selectors touching .code-line and the parent code
element accordingly and verify visually on mobile with multi-line diffs and
horizontal scrolling.


/* 行号 */
.prose-monolith pre code .line-number {
display: inline-block;
width: 32px;
margin-right: 16px;
width: 28px;
margin-right: 12px;
text-align: right;
color: oklch(0.35 0 0);
user-select: none;
Expand All @@ -678,7 +686,7 @@

/* 有行号时调整 pre 左边距 */
.prose-monolith .has-line-numbers pre {
padding-left: 16px;
padding-left: 12px;
}

/* 高亮行 */
Expand Down
Loading