Руслан Янборисов

У вашего класса login display: flex. Flex по умолчанию растягивает все дочерние элементы до максимального. Для вашего случая я просто порекомендовал бы поиграться с высотой самого родительского блока. А так же задать классу login height: auto.
https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

Когда то давно налепил вот такой if:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))

Выдаёт true - если пользователь не с компьютера. Не знаю, насколько это надёжно, но пользуюсь этим давно и не разу не подводило.

Погуглите про тег canvas, с помощью него можно делать такие фокусы.
Но мой вам совет - лучше забудьте эту идею))

Насколько я понял, необходим такой сайтбар:
https://jsfiddle.net/0oth6Lxy/