fix: smooth scroll to search input with dynamic banner offset

[FreakPirate]

Overview

This pull request addresses the scrolling behavior when focusing on the search input field via the shortcut (Ctrl + K / Cmd + K). The previous implementation did not account for the height of the warning banner, resulting in a less-than-ideal user experience.

Changes Made

• Adjusted Scroll Behavior: The scroll position now considers the height of the #dev-warning banner, ensuring that the search input is not obscured.
• Replaced scrollIntoView: The code now uses window.scrollTo to smoothly scroll to the search input's position while accounting for the banner's height.
• Improved User Experience: This change provides a seamless transition when the search input is focused, improving overall usability.

Testing

• Tested the functionality across different browsers to ensure compatibility.
• Verified that the scrolling behaves as expected with and without the warning banner present.

---

Issue Reference

This pull request fixes #1620.

[bmispelon]

Hi and thanks so much for this. I've tested it locally and it seems to work very well.

One thing I noted is that the overlapping problem also shows up on outdated pages (like https://docs.djangoproject.com/en/1.8/) so it'd be nice to have it fixed there too. I've made a suggestion for how to do that but if you have a better idea I'm all ears.

Let me know what you think!

[bmispelon]

There's also a banner when the version is outdated, but it uses a different id (#outdated-warning). I would suggest using the class instead:

Suggested change

	const warning_banner_height = $('#dev-warning').outerHeight() || 0;
	const warning_banner_height = $('.doc-floating-warning').outerHeight() || 0;