Driver.js plugin not working in responsive

Question

Does anyone use the driver.js plugin? I am using the Driver.js plugin on my website for walkthrough.

I have two issues

1. On the desktop, it's working perfectly but when I checked on mobile it's not working as expected. I am getting horizontal scroll and sometimes when clicking on next then it's not going to the next tour.

2. Is there any way that at the end I am getting the 'Done' button So after clicking on 'Done' can we show one alert or any action event?

$(document).ready(function() {


  document.getElementById('start-tour')
    .addEventListener('click', function(event) {
      event.stopPropagation();

      const driver = new Driver({
        allowClose: false,
        closeBtnText: 'Skip',
        prevBtnText: 'Previous',
        nextBtnText: 'Next',
        doneBtnText: 'Done', // Text on the final button
        animate: false
      });
      // Define the steps for introduction
      driver.defineSteps([{
          element: '#guide1',
          popover: {
            className: 'tour',
            title: 'Some text here',
            //description: 'Body of the popover',
            position: 'right'
          }
        },
        {
          element: '#guide2',
          popover: {
            className: 'tour',
            title: 'Title heading here 2',
            //description: 'Body of the popover',
            position: 'right'
          }
        },
        {
          element: '#guide3',
          popover: {
            className: 'tour',
            title: 'Title heading here 3',
            //description: 'Body of the popover',
            position: 'top-center'
          }
        },
        {
          element: '#guide4',
          popover: {
            className: 'tour',
            title: 'Title heading here 4',
            //description: 'Body of the popover',
            position: 'top-center'
          }
        },


      ]);
      // Start the introduction
      driver.start();


    });


  $("button.driver-next-btn").click(function() {
    alert('Awesome');

  });

});

.tourBox div {
  padding: 30px;
}

<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
<a href="javascript:void(0);" id="start-tour" class="driver-next-btn me-3">Next</a>

<div class="tourBox">
  <div id="guide1">Hi I am guide One</div>
  <div id="guide2">Hi I am guide Two</div>
  <div id="guide3">Hi I am guide Three</div>
  <div id="guide4">Hi I am guide Founr</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>