Cytoscape for Angular (Node) - Horizontal Scaling Issues

Question

I am new to this forum and Cytoscape.JS in general - please bear with me!

I have an application I am developing inside of Angular using the Node Cytoscape.JS package. The cy graph is rendered within an angular card - the card is 50% of the width of the screen, but the Cytoscape element inside is allowed to take up the entirety of the card contents.

I have a dataset with a few hundred nodes using the "cose" layout. The issue we have is the rendered graph only shows up as a column inside the center of the card, taking maybe 50% of the available space (center justified). If I grab the graph render and slide it, it'll move into the open space, so I know that Cy is able to access it.

The hope is to get the graph to spread itself, widthwise, to fill the entire space it is allowed - then from there span down past the lower boundaries of the card (into the scroll area). Doing some research, I found that the "spread" layout may be a better direction to go, but after installing the package and setting up the required elements, I was met with nothing but errors. If anyone can help me with that, I'm open as well!

Currently we are trying to manipulate the layout object to fit 100% width - that object is below. Nothing in CSS or JS has made a difference. If anyone has ideas please let me know! Thank you!

cy = cytoscape({
            container: cy_container,
            elements: this.elements,
            layout: {
                name: 'cose',
                // rankDir: 'LR',
                directed: true,
                padding: 0
            },
            style: this.styleSheet,
           
           
        });