TimelinePlugin insertPosition: 'beforebegin' does not respect boundaries with high peaks

[mvynhb]

Bug description

When using peaks that vary from 0.1 to 1 the top boundaries are not respected, and the waveform overflows into the labels.

Environment

• Browser: Chrome

Minimal code snippet

const topTimeline = TimelinePlugin.create({
  height: 20,
  insertPosition: 'beforebegin',
  style: {
    fontSize: '20px',
  },
})

// Create a second timeline
const bottomTimline = TimelinePlugin.create({
  height: 20,
  style: {
    fontSize: '20px',
  },
})

// Create an instance of WaveSurfer
const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  plugins: [topTimeline, bottomTimline],
  peaks:     [
      0.1, 1
    ],
})

Can easily test here: https://wavesurfer.xyz/examples/?timeline-custom.js

Expected result

Top waveform should not overflow labels.

Obtained result

Waveform is overflowing labels.

Screenshots

[WahidN]

So any fix for this? Can we add a margin between the timeline and the waveform?