HubSpot/Drop Hiding on resize

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgithub.com/HubSpot/drop/master/css/drop-theme-arrows-bounce-dark.css">
<script src="https://rawgithub.com/HubSpot/drop/master/drop.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/HubSpot/drop/master/css/drop-theme-arrows-bounce.css">
<script id='X' type='text/x-script'>
    <div class='wide'>
        You can only read part of this message.
    </div>
</script>

<button type='button' class='btn btn-primary btn-lg' id='Y'>
    Drop!
</button>

CSS

#Y {
    margin: 50px;
    margin-top: 300px;
    padding: 20px 80px;
}

.wide {
    width: 500px;
}

body {
    height: 2000px;    
}

JavaScript

DROP_THEME = "drop-theme-arrows-bounce"

target = $("#Y")
template = $("#X")

drop = new Drop({
      target: target.get(0),
      classes: DROP_THEME,
      content: template.html(),
      position: "top center",
      openOn: click,
  tetherOptions: {
    constraints: [
      {
        to: 'scrollParent',
        attachment: 'together',
        pin: true
      }
    ]
  }
})

target.on("click", function () {
    $(drop.dropContent).find(".list-group-item").last().remove()
    drop.tether.position()
    return false // preventDefault; stopPropagation
})

drop.open()