Arrow size seems to be competing with floating ui offset

[jkochocki]

Hi, I'm trying to use an offset to place the floating element diagonally adjacent to a target with a smaller height (I believe this is important to note).
example:

I believe I'm using the floating ui api correctly (at least, according to their docs) in how I'm setting the offset:

      middleware: [
        offset(({ rects }) => {
          console.log(rects);
          return {
            alignmentAxis: -rects.floating.height,
          };
        }),
      ],
    },

However, I am trying to use a custom arrow icon. I am finding that setting a height larger than 16px (the initial shepherd styling for the arrow) causes the floating element's position to jump, such that it is no longer aligned how I would like. This is for a right-end-positioned step.

example (17px height arrow)

I'm wondering if this is a bug in how shepherd is using floating ui or if it's improper usage on my part. If it's something on my end, could I please get some guidance for how to achieve what I want?

sandbox

In playing around with it, it seems to be some function of the target height vs. the arrow size that causes the floating element to jump. e.g. a 17px arrow on a 24px target will not be positioned correctly, but will be positioned correctly on a 25px target. I don't see why this is, as I would expect the positioning of the floating element to be independent of the size or position of the arrow.

[chuckcarpenter]

Offhand, I'm not sure, but we do a little bit here https://github.com/shepherd-pro/shepherd/blob/main/shepherd.js/src/utils/floating-ui.ts and wondering if there's an issue in that? Strange that a 1px difference would cause that. I'll try to take a look as well this week.

[2021eo3ar]

@chuckcarpenter, could you please label this issue as hacktoberfest, and assign to me as well, I can come up with a better solution.

[chuckcarpenter]

@2021eo3ar sorry I really dropped the ball on that one, happy to take a PR if you're doing any Xmas hacking!