Fixes hidden search elements in search panel on scroll

[akolson]

Summary

This pr fixes hidden search elements in the search panel on scroll.
Before:

2023-06-02_11-24-46.mp4

After:
Show resources as last filter

Accessibility as last filter

Activities as last filter

References

Fixes #10775

Reviewer guidance

1. Import the QA channel and navigate to Learn > Library
2. Observe the the filter section of the page while resizing the browser window to allow the search panel scroll.

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0a14.dev0_git.81.g9245d412.pex
Windows Installer (EXE)	kolibri-0.16.0a14.dev0+git.81.g9245d412-unsigned.exe
Debian Package	kolibri_0.16.0a14.dev0+git.81.g9245d412-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0a14.dev0+git.81.g9245d412-0.3.0.dmg
Source Tarball	kolibri-0.16.0a14.dev0+git.81.g9245d412.tar.gz
WHL file	kolibri-0.16.0a14.dev0+git.81.g9245d412-py2.py3-none-any.whl

[nucleogenesis]

Code changes look good! I'll leave the final approval to @pcenov 's QA

[pcenov]

Hi @akolson unfortunately this is not working in IE11 and mobile browsers such as Chrome and Firefox for Android as I am not able to see the 'Channel' dropdown in these browser when I scroll down. Here's a video for Internet Explorer 11:

2023-06-05_16-19-22.mp4

Note that you have to check this in an actual mobile phone device as if you are using Chrome's device emulator everything is looking just fine.

[akolson]

It turns out there is a bug associated with overflow-y: scroll; that doesn't seem to take the bottom padding into consideration in some browsers. There is a workaround, 🤞 it works

[akolson]

Hi @pcenov! Issue has been resolved on IE11 and, on chrome and firefox mobile browsers;
IE11

Chrome Mac

Firefox Windows

Chrome Android

Firefox Android

[pcenov]

Awesome @akolson - I confirm that this is fixed now in IE11 and mobile browsers.