Support smaller device sizes

Ran across this during UAT for an upcoming launch of a new site using tour.

I don't have an immediate idea for a fix. Removing min-width: 500px results in a usable tour tip on mobile, but it looks unnaturally squished on larger displays. Ideally, we would have minimum widths based on breakpoints. Any thoughts on how many breakpoints to support?

Here is my take on adding a bit better responsive support to the tour tip elements. At smaller breakpoints, it will never exceed the display width and the button and text sizes are adjusted a bit for better spacing on small devices down to 375 pixels wide.

This could definitely use a second set of eyes, but I created a patch from the approach that is working pretty well for me.

One more quick commit to fix the stylelint issues.

Mind providing screenshots?

Here are some screenshots that show a before an after. I've applied the patch of these changes to my blog post about the Tour module as well—if you want to see it in action: https://joshuami.com/blog/2025/tour-module/. The patch slightly alters font sizes as padding per break point for smaller devices.

Before

After