Salient Template problematic autoscrolling

[BernhardBehrendt]

What component (if applicable)
Salient Template

• URL for category: https://salient.tailwindui.com/
• Component name: SecondaryFeatures.jsx

Describe the bug
When I scroll down to the images of the Secondary Features section so that just the last line of text of the above text is visible and then click on that text the scroll position changes and page scrolls up.

But it does not scroll up until the beginning of that section but all the way up so that the image is only visible half, even though there's enough space on the screen if the scrolling would move until the real beginning of that section

To Reproduce
Steps to reproduce the behavior:

1. Go to https://salient.tailwindui.com/
2. Scroll to Secondary Features section so that you see the whole image and the last line of the above Text blocks
3. Click on a text which is yet not selected (2nd, 3rd)
4. See error

Expected behavior
The scroll position is applied that places the text blocks on top of the page and not "somewhere" in between resulting in a sliced image view.

Screenshots
If applicable, add screenshots to help explain your problem.

Browser/Device (if applicable)

• OS: Mac
• Browser Chrome, Brave (latest)

[reinink]

Hey! Thanks for reporting this issue. This was actually a bug in our underlying Headless UI library, which is used for the tabs in this template. I've corrected this bug there: tailwindlabs/headlessui#2674

I've already updated our template to use the latest version of Headless UI that includes this fix, and you can see that it's been resolved in our template preview here: https://salient.tailwindui.com/

If you'd like to fix this in your project, simply update to the latest version of Headless UI:

npm install @headlessui/react@latest

Hope that helps, and thanks again! 🙏