fix: improve html diagram layout and sizing

Author: baboonzero

code-explainer/scripts/generate_html.py

@@ -135,13 +135,13 @@ def _diagram_cards(diagram_manifest: Dict[str, Any]) -> str:
   <div class="diagram-head">
     <h3>{_escape(title)}</h3>
     <div class="diagram-actions">
-      <button class="btn-open" data-title="{_escape(title)}" data-src="{_escape(png_src)}" data-fallback="{_escape(svg_src)}" type="button">Open Full Screen</button>
+      <button class="btn-open" data-title="{_escape(title)}" data-src="{_escape(svg_src)}" data-fallback="{_escape(png_src)}" type="button">Open Full Screen</button>
       <a href="{_escape(svg_src)}" target="_blank" rel="noopener">SVG</a>
       <a href="{_escape(png_src)}" target="_blank" rel="noopener">PNG</a>
     </div>
   </div>
   <div class="diagram-frame">
-    <img class="diagram-preview" src="{_escape(png_src)}" data-fallback="{_escape(svg_src)}" alt="{_escape(title)} diagram" loading="lazy" />
+    <img class="diagram-preview" src="{_escape(svg_src)}" data-fallback="{_escape(png_src)}" alt="{_escape(title)} diagram" loading="lazy" />
   </div>
 </article>
 """
@@ -403,7 +403,7 @@ def generate_html(
     }}
     .diagram-grid {{
       display: grid;
-      grid-template-columns: 1fr;
+      grid-template-columns: repeat(2, minmax(0,1fr));
       gap: 14px;
     }}
     .diagram-card {{
@@ -449,18 +449,18 @@ def generate_html(
       border: 1px solid var(--line);
       border-radius: 10px;
       background: #ffffff;
-      min-height: 300px;
+      height: 340px;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: auto;
       padding: 8px;
     }}
     .diagram-preview {{
-      width: min(100%, 980px);
       max-width: 100%;
+      max-height: 100%;
+      width: auto;
       height: auto;
-      max-height: 420px;
       display: block;
       cursor: zoom-in;
     }}
@@ -514,8 +514,9 @@ def generate_html(
     @media (max-width: 1080px) {{
       .layout {{ grid-template-columns: 1fr; }}
       .toc {{ position: static; }}
+      .diagram-grid {{ grid-template-columns: 1fr; }}
       .grid2 {{ grid-template-columns: 1fr; }}
-      .diagram-preview {{ width: min(100%, 760px); max-height: 360px; }}
+      .diagram-frame {{ height: 300px; }}
       .lightbox-img {{ min-width: 640px; }}
     }}
   </style>

code-explainer/scripts/render_diagrams.py

@@ -49,19 +49,19 @@ def render_diagrams(diagrams_dir: Path, output_dir: Path, theme: str = "neutral"
         config_payload = {
             "themeVariables": {
                 "fontFamily": "IBM Plex Sans, Segoe UI, Arial",
-                "fontSize": "20px",
+                "fontSize": "16px",
                 "lineColor": "#334155",
                 "primaryTextColor": "#111827",
                 "primaryBorderColor": "#334155",
                 "primaryColor": "#f8fafc",
             },
-            "flowchart": {"nodeSpacing": 70, "rankSpacing": 100, "curve": "basis"},
+            "flowchart": {"nodeSpacing": 55, "rankSpacing": 75, "curve": "basis"},
             "sequence": {
-                "diagramMarginX": 60,
-                "diagramMarginY": 30,
-                "actorMargin": 90,
-                "width": 220,
-                "height": 90,
+                "diagramMarginX": 40,
+                "diagramMarginY": 24,
+                "actorMargin": 70,
+                "width": 180,
+                "height": 76,
             },
         }
         Path(config_path).write_text(json.dumps(config_payload), encoding="utf-8")
@@ -73,8 +73,8 @@ def render_diagrams(diagrams_dir: Path, output_dir: Path, theme: str = "neutral"
             entry = {"diagram": mmd_path.name, "svg": svg_path.name, "png": png_path.name, "renderer": "", "ok": True, "errors": []}
             if mmdc:
                 # White background + larger default typography/layout for cleaner onboarding visuals.
-                svg_cmd = [mmdc, "-i", str(mmd_path), "-o", str(svg_path), "-t", theme, "-b", "white", "-s", "2", "-C", config_path]
-                png_cmd = [mmdc, "-i", str(mmd_path), "-o", str(png_path), "-t", theme, "-b", "white", "-w", "3200", "-H", "2200", "-s", "2", "-C", config_path]
+                svg_cmd = [mmdc, "-i", str(mmd_path), "-o", str(svg_path), "-t", theme, "-b", "white", "-s", "1.4", "-C", config_path]
+                png_cmd = [mmdc, "-i", str(mmd_path), "-o", str(png_path), "-t", theme, "-b", "white", "-w", "2200", "-H", "1500", "-s", "1.4", "-C", config_path]
                 code_svg, _out_svg, err_svg = common.run_cmd(svg_cmd, timeout=90)
                 code_png, _out_png, err_png = common.run_cmd(png_cmd, timeout=90)
                 entry["renderer"] = "mmdc"