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;

[FreakPirate]

Thanks @bmispelon for the suggestion. Apologies for responding so late, I must have missed this comment.

[FreakPirate]

Since search-key.js was refactored into djangoproject.js, I have make the suggested changes in the designated place. Please re-review. 🙌

[adamzap]

@FreakPirate Could you address the comments on this PR if you're still interested in working on it? Otherwise it will be closed in a week. Thanks!

[FreakPirate]

Hi @adamzap . I must have missed the comment. Let me address it right away. Thanks for being considerate 🙌

[adamzap]

@FreakPirate Thanks for this! Let me see if we are able to get #2075 in before we move forward here.

[adamzap]

@FreakPirate Thanks for your patience here.

@bmispelon I think it's unfortunate that this code has to account for the floating warning element specifically. If we added another element with a fixed position at the top of the page, we'd have to account for it in this JavaScript code. I suppose another option would be to just scroll to the top of the page. Does that seem cleaner to you, or does it worsen the user experience here?