Cytoscape object inside a Table shows weird behaviour

Description

As the title states. Very weird and unexpected behavior occurs - the cytoscape component is translated by half of the component to the right, meaning only the left part of the component is rendered on the right side of the table. What's even weirder is that mouse interaction events work as expected, meaning if I click on the empty space on the left side of the table, I see mouse events on the right side of the table.

FYI - as a workaround this issue can be circumvented by using other components such as div with flex: left.

Steps/Code to Reproduce

import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Table(
            cyto.Cytoscape(
                id='cytoscape-two-nodes',
                layout={'name': 'preset'},
                style={'width': '100%', 'height': '100vh'},
                elements=[
                    {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 75, 'y': 75}},
                    {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
                    {'data': {'source': 'one', 'target': 'two'}}
                ]
            ),
            style={'width': '100%', 'height': '100%', 'textAlign': 'center'}
        ),
    ]
)

if __name__ == '__main__':
    app.run_server(debug=False)

Expected Results

Component rendered as normal

Actual Results

cytoscape_bug

Versions

Dash 1.19.0 Dash Core Components 1.1.2 Dash HTML Components 1.15.0 Dash Renderer 1.9.0 Dash HTML Components 0.2.0

FYI - there is an issue in your versions script (you have dash_renderer.__version) written)

plotly / dash-cytoscape