diff --git a/client/src/globals.css b/client/src/globals.css index 7c23eac..fb5014d 100644 --- a/client/src/globals.css +++ b/client/src/globals.css @@ -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%; } } /* 独立 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; @@ -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 自然撑开,不在此设置避免循环依赖 */ } /* 行号 */ .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; @@ -678,7 +686,7 @@ /* 有行号时调整 pre 左边距 */ .prose-monolith .has-line-numbers pre { - padding-left: 16px; + padding-left: 12px; } /* 高亮行 */