Александр

Javascript и медиазапросы в CSS никак не связаны. Они работают независимо друг от друга. Почему думаете что причина в JS?

Оптимальный метод верстки используется, например, в бутстрапе 4 - https://getbootstrap.com/docs/4.0/layout/grid/
Разметка на флексах. Для изучения можно посмотреть примеры - https://getbootstrap.com/docs/4.0/examples/

Нужно обернуть input в div и добавить туда элемент иконки. Можно напрямую, либо через псевдоэлементы.
Как пример - https://www.w3schools.com/howto/howto_css_form_icon.asp

Как правило, при клике за областью модального окна, оно должно закрываться. В вашем случае, возможно, события клика произошедшие по самому модальному окну не исключаются из обработки.