fix: Mermaid 图表改为宽度固定、高度自适应

- SVG 宽度固定为 100%,适应容器宽度
- SVG 高度自动计算,根据内容自由伸展
- 移除所有高度限制,让图表完整显示
This commit is contained in:
2026-01-24 23:33:24 +08:00
parent ce48c7827e
commit d59c5ba07d

View File

@@ -919,17 +919,13 @@ article .wp-block-separator {
max-width: 100%; max-width: 100%;
opacity: 0; opacity: 0;
animation: mermaidFadeIn 0.3s ease-in-out forwards; animation: mermaidFadeIn 0.3s ease-in-out forwards;
display: flex;
justify-content: center;
align-items: center;
} }
.mermaid-container svg { .mermaid-container svg {
width: 100% !important;
height: auto !important;
max-width: 100%; max-width: 100%;
max-height: 600px;
height: auto;
display: block; display: block;
width: auto !important;
} }
/* Mermaid 淡入动画 */ /* Mermaid 淡入动画 */
@@ -16636,19 +16632,13 @@ html.darkmode .mermaid-error-container .error-code code {
overflow-x: auto; overflow-x: auto;
max-width: 100%; max-width: 100%;
transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in;
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
} }
.mermaid-container svg { .mermaid-container svg {
width: 100% !important;
height: auto !important;
max-width: 100%; max-width: 100%;
max-height: 600px;
height: auto;
width: auto !important;
display: block; display: block;
margin: 0 auto;
} }
/* ---------- 卡片内的 Mermaid 图表 ---------- */ /* ---------- 卡片内的 Mermaid 图表 ---------- */
@@ -16672,11 +16662,6 @@ html.darkmode .mermaid-container {
margin: 15px 0; margin: 15px 0;
border-radius: calc(var(--card-radius) * 0.8); border-radius: calc(var(--card-radius) * 0.8);
} }
.mermaid-container svg {
max-width: 100%;
max-height: 500px;
}
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@@ -16684,10 +16669,6 @@ html.darkmode .mermaid-container {
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
} }
.mermaid-container svg {
max-height: 400px;
}
} }
/* ---------- Mermaid 错误提示样式 ---------- */ /* ---------- Mermaid 错误提示样式 ---------- */