Я поигрался с кодом, которым вы поделились, и заметил, что вы установили высоту modal-content
на 90%.
Таким образом, он повторно регулирует высоту вашего модального окна до 90% экрана доступная высота, которая изменяется при открытой клавиатуре.
Поэтому я рекомендую установить фиксированную высоту, например 300px
вместо%, и иметь другую высоту для мобильных устройств, использующих медиа-запросы.
.modal-content{
width:90%;
/* height:50%; */
height: 300px;
background-color: white;
border-radius: 4px;
text-align: center;
padding-top: 20px;
display:flex;
flex-direction: column;
justify-content:space-between;
}
Дайте мне знать, если вам понадобятся дополнительные разъяснения.