Search Bar has design issues in mobile view

[927tanmay]

Actual Behaviour

When one of the checkboxes is unchecked from the search bar dropdown then due to CSS or responsiveness issues we are not able to get the desired view of the search bar (cancel button and language selection option gets out of the screen).

Expected Behaviour

The search must remain functional and the cancel icon and language selection option must still be visible when one of the checkboxes is unchecked.

Steps to reproduce it

Go to susi.ai in mobile view
Uncheck the skill checkbox from the search bar

Screenshots of the issue

Author, Examples, Description takes all the space on the screen and cancel icon gets out of the window.

Would you like to work on the issue?

Yes

[927tanmay]

@snitin315 @anishagg17 could you please give any suggestions what should be the actual behaviour of the search bar on having checked three checkboxes since in current scenario UI is breaking.

[elit-altum]

@927tanmay I don't think this is required as the navbar actually changes completely on mobile screens. As you have resized the browser window you are actually seeing desktop version on small screens. You can refresh the screen, it would load the mobile layout & this issue will be resolved.

[amanprateek123]

@927tanmay I want to contribute in open source. Please assign this issue to me. I checked the website's mobile version( https://susi.ai/).I will try my best in solving the issue

[927tanmay]

@amanprateek123 you can go ahead and solve the issue. But as @elit-altum said it is not required, so it is better to first confirm with him.

[devanshbatra]

@elit-altum You are completely right that as soon as we refresh, a mobile layout is loaded. But the problem still exists when we click on the search icon and uncheck the skill checkbox from the search bar to apply filter to our search. At this moment, the user even cannot change his language preferences.
The solution maybe that search input field and other options are moved below the filters(checkboxes) as soon as the filters are applied. I would be really glad to solve the issue @927tanmay . Please review my approach and allow me to solve it.