Fixed Search Bar Issue

[THEBOSS0369]

This PR Fixes Issue #1214
Also fixes the additional problems from another PR

Description

In this PR i have removed the unnecessary space below the Search Bar, The space is now same as the above the search bar.
The Height of Search Bar is same as the random and search Button.
Little space is also added between search bar and search button.
Font size is also customized when screen is narrow

Test

I have done all the necessary test

1. Checked in both "Restricted" and "ServiceWorker" Everything is working fine.
2. Unit tests npm test no issue
3. End-to-end (e2e) tests-e2e-firefox-> All tests Passed.
4. extension versions with production code tested
5. Browser Test -> Microsoft Edge.

Screenshot

[THEBOSS0369]

This other PR i was talking about is this #1216

[Jaifroid]

Thanks for this PR! It works for narrow screen sizes. But the space could also be reduced on desktop screen sizes too. The bottom space is still larger than the top space for screen widths larger than 768px. But considering that it's a frequent user complaint that KJS wastes screen space even on desktop, we could perhaps try making these changes universal in the app, rather than only at small screen widths.

The other thing is whether you checked that the !important is actually necessary in all cases. There is an issue from a previous dev suggesting we try to reduce or eliminate the use of !important in our css, though I'm not sure that'll be possible while we're still using this older version of Bootstrap.

[THEBOSS0369]

@Jaifroid sir I have fixed the search bar for bigger screens plus i have removed !important from the code i edited ,it wasn't necessary but it easily fixed the issue so i used it.

[Jaifroid]

@THEBOSS0369 Thank you very much! I'll do a bit of testing, and if all OK, I'll merge!

[Jaifroid]

Thank you for this PR @THEBOSS0369. It all checks out!