Commit 8450d6f3 authored by Data Governance Dev's avatar Data Governance Dev

fix(web3): ExplainIssueDialog 规则说明过长导致左栏溢出截断

现象
点「!」弹框左栏「规则说明」desc 很长的规则(如邮箱校验规则 8 / 200+ 字),
整段 desc 没有最大高度限制,把左栏撑爆,下面的「规则代码」标题 + code-block
被视觉截断;右侧的 pane-title-tag(规则类型胶囊)跟 desc-block 视觉重叠,UI 崩。

修复
src/components/ExplainIssueDialog.vue
- .explain-dialog 加 min-height: 0
  (flex 子容器需要 min-height: 0 才能让 overflow 真正生效;
   否则 flex item 默认 min-height: auto,会按内容撑开无视 max-height)
- .desc-block 加 max-height: 200px; overflow-y: auto
  跟 .code-block 视觉统一;超长 desc 内部独立滚动,不再撑爆左栏

效果
- 规则说明超 200px → 内部独立滚动条
- 整个 dialog 高度超 84vh → .modal-body 兜底滚动
- 两层滚动不冲突(外层兜底,内层是单段 desc 限高)

验证
npx vite build → ✓ built in 6.80s

注
4 个 web3/tests/*.png modified 未提交(与本修复无关)
parent 5f6fe045
...@@ -272,6 +272,9 @@ function onRetry() { ...@@ -272,6 +272,9 @@ function onRetry() {
max-height: 84vh; max-height: 84vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* 2026-08-24:flex 子容器需要 min-height: 0 才能让 overflow 真正生效
(否则 flex item 默认 min-height: auto,会按内容撑开无视 max-height) */
min-height: 0;
} }
.title-icon { .title-icon {
...@@ -473,6 +476,11 @@ function onRetry() { ...@@ -473,6 +476,11 @@ function onRetry() {
color: #5c4b00; color: #5c4b00;
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
/* 2026-08-24:限制 desc 最大高度,超出滚动 —— 否则规则 8/邮箱校验那种 200+ 字的
desc 会把整个左栏撑爆,下面的「规则代码」+ code-block 被视觉截断。
高度跟 code-block 保持一致,视觉统一 */
max-height: 200px;
overflow-y: auto;
} }
/* LLM 状态:loading / error / success */ /* LLM 状态:loading / error / success */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment