Yes well spotted. We actually have other issues with the library we're using for the search dropdown, so the plan was to switch to a different library which has much reduced space taken up apart from other things.
We'll make sure the new library we choose addresses this along with the other issues.

I checked the library repo at https://github.com/select2/select2. The best possible fix seems to be changing
var enoughRoomAbove = viewport.top < (offset.top - dropdown.height); to var enoughRoomAbove = false; , if we want the dropdown to be below always.
The library still doesn't provide an option to set the above and below behavior by user.
specific file can be seen at https://github.com/select2/select2/blob/develop/src/js/select2/dropdown/attachBody.js (line 176).
I have already tested this and it works great on mobile and desktop views.
Should I create a patch ? Thanks.

@Sanyam.wikime you can always submit a patch as the task is open for discussions.

Change 579607 had a related patch set uploaded (by Sanyam.wikime; owner: Sanyam.wikime):
[labs/tools/Isa@master] Fixed : Depicts selector too big

https://gerrit.wikimedia.org/r/579607