Plotly.js modebar groups icons and places it over legend

Question

Here is the picture of my problem. As you can see, my modebar is appearing as a grouped set of icons and is placing it over the legend. I just copy and pasted some example code from their site using example data. I have no other css affecting this at all. Below is the blob of code I am using.

The similar post here shows what it SHOULD look like, they are all in a single row and out of the way of the legend.

How do I make my modebar look like the one in the second link?

<div id="myDiv"></div>

<script>
    var trace1 = {
        x: [0, 1, 2],
        y: [10, 11, 12],
        type: 'scatter'
    };

    var trace2 = {
        x: [2, 3, 4],
        y: [100, 110, 120],
        yaxis: 'y2',
        type: 'scatter'
    };

    var trace3 = {
        x: [3, 4, 5],
        y: [1000, 1100, 1200],
        yaxis: 'y3',
        type: 'scatter'
    };

    var data = [trace1, trace2, trace3];

    var layout = {
        yaxis: {domain: [0, 0.33]},
        legend: {traceorder: 'reversed'},
        yaxis2: {domain: [0.33, 0.66]},
        yaxis3: {domain: [0.66, 1]}
    };

    Plotly.newPlot('myDiv', data, layout, {displaylogo: false});
</script>

Answer 1

Official "answer" for acceptance: this is usually due to external CSS.