Graphviz graph resizes on exit of full screen

Summary

Before full screen, the graphs are the same size and relatively close together. After exiting full screen, the graph that was view in full screen gets larger and pushes the other graphs away.

Streamlit 1.20.0
Python 3.9.13

If I use Streamlit 1.22.0, the initial full screen does not make the image larger, it just shows the image by itself at the top left corner. Then exiting the full screen has the same behavior as above. If I full screen the same image again, it will make the image larger.

Steps to reproduce

from graphviz import Digraph
import streamlit as st

graph_dict = {'variant1': ['Task 1', 'Task 1', 'Task 2', 'Task 3'],
              'variant2': ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 4'],
              'variant3': ['Task 1', 'Task 2', 'Task 4'],
              'variant4': ['Task 1', 'Task 2', 'Task 3','Task 4', 'Task 5']}

for var in graph_dict.values():
    dot = Digraph(graph_attr={'rankdir':'LR'},
                  node_attr={'shape':'rectangle'})
    for v in range(0,len(var)):
        dot.node(var[v])
    for i in range(0,len(var)-1):
        dot.edge(var[i], var[i+1])

    st.graphviz_chart(dot)

To reproduce the behavior:

  1. run the app
  2. click on the full screen arrows
  3. click on arrows to exit full screen

Expected behavior:

For the images to look like they did before the full screen
Screenshot 2023-05-02 at 8.40.02 AM

Actual behavior:

The image that was full screened is now larger and pushes the other images away

Debug info

Streamlit 1.20.0
Python 3.9.13

  • PyEnv
  • OS version: Mac 13.3.1
  • Browser version: Chrome and Firefox

The reason that I am doing a loop here for the nodes and edges is because, in the original code, there is logic during these steps to name the nodes and whether or not to draw an edge. I removed that logic for this example.

I encounter this issue as well in my web app: https://automata.streamlit.app/