Current Behavior

I am using shepherdjs to build an app tour. Shepherdjs in turn uses floating-ui under the hood.

My problem is that the tour step is positioned too close to the screen edge, making it look unpolished.

Example (Current Behavior):

    {
      attachTo: {
        element: '#top-menu-account-settings-menu-icon',
        on: 'left',
      },
      buttons: [
        {
          action: addLocationTour.next,
          text: 'Next',
        },
      ],
      floatingUIOptions: {
        middleware: [
          offset(12), // Offset from the highlighted element
        ],
      },
      modalOverlayOpeningRadius: 5,
      text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.',
    },

Attempted Fix

I tried adding shift({ padding: 16 }) to floatingUIOptions. This successfully prevented the step from touching the screen edge but also misaligned the arrow, shifting it downward and away from the icon center.

Example (Misaligned Arrow Issue):

    {
      attachTo: {
        element: '#top-menu-account-settings-menu-icon',
        on: 'left',
      },
      buttons: [
        {
          action: addLocationTour.next,
          text: 'Next',
        },
      ],
      floatingUIOptions: {
        middleware: [
          offset(12), // Offset from the highlighted element
          shift({ padding: 16 }), // Prevents tour from touching screen edges but shifts the arrow
        ],
      },
      modalOverlayOpeningRadius: 5,
      text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.',
    },

Question

How can I prevent the step from touching the screen edge without affecting the arrow alignment?