Size CFGs naturally, capped at 600px (vh feeds back through HF's auto-resizing iframe)

app.py

@@ -28,8 +28,11 @@ GRAPHVIZ_HEAD = "".join(f'<script src="https://cdn.jsdelivr.net/npm/{lib}"></scr
     "d3@7.9.0/dist/d3.min.js", "@hpcc-js/wasm@2.20.0/dist/graphviz.umd.js", "d3-graphviz@5.6.0/build/d3-graphviz.min.js"))
 GRAPHVIZ_JS = """
 const graph = element.querySelector('.graph');
-d3.select(graph).graphviz({useWorker: false, zoom: true, fit: true})
-  .width(graph.clientWidth).height(graph.clientHeight).renderDot(props.value);
+d3.select(graph).graphviz({useWorker: false, zoom: true}).renderDot(props.value, () => {
+  const svg = graph.querySelector('svg');
+  svg.setAttribute('width', '100%');
+  svg.setAttribute('height', Math.min(svg.viewBox.baseVal.height * 4 / 3, 600));
+});
 """
 EXAMPLES = sorted(str(p) for p in Path(__file__).with_name("examples").glob("*.cubin"))
 
@@ -83,7 +86,7 @@ with gr.Blocks(title="cuobjdump / nvdisasm") as demo:
             if output.startswith("digraph"):
                 gr.Markdown(f"`{label}` (scroll to zoom, drag to pan)")
                 gr.HTML(output.replace("\t", "    "), head=GRAPHVIZ_HEAD, js_on_load=GRAPHVIZ_JS,
-                        html_template='<div class="graph" style="height:70vh;background:white;'
+                        html_template='<div class="graph" style="background:white;'
                                       'border:1px solid var(--border-color-primary)"></div>')
                 with gr.Accordion(f"{label} (DOT source)", open=False):
                     gr.Code(output, max_lines=60)