Legend always being cut off

[GWilo]

Hi there,

I’m using a really standard scatter graph:

class SLineGraph extends React.Component {
  constructor (props) {
    super(props)
    const baseConfig = {
      displayModeBar: false,
      responsive: true
    }
    const baseLayout = {
      autosize: true,
      font: {
        family: 'Basier Circle Reg',
        size: 12,
        color: '#6b6b76'
      },
      margin: {
        l: 48,
        r: 24,
        b: 48,
        t: 0
      },
      legend: {
        font: { size: 13, family: 'Basier Circle Med', color: '#333' }
      },
      yaxis: {
        title: 'mm3',
        fixedrange: true,
        automargin: true
      },
      xaxis: {
        title: 'Days',
        fixedrange: true,
        automargin: true
      }
    }

    /* Some code on how the plots are generated

    const initialState = {
      data: plots,
      layout: baseLayout,
      frames: [],
      config: baseConfig
    }
    this.state = { ...initialState }
  }

  render () {
    return (
          <Plot
            data={this.state.data}
            layout={this.state.layout}
            frames={this.state.frames}
            config={this.state.config}
            onInitialized={(figure) => this.setState(figure)}
            onUpdate={(figure) => this.setState(figure)}
            style={{ width: '100%', height: '100%' }}
          />
    )
  }
}

The legend is always cutting off no matter what values I set? Any ideas?

Actual text:

Edit: Removing the style width 100/height 100 prop from the Plot component, graph not fluid to container?