Изменить высоту при появлении клавиатуры (Telegram Web App, Vue) ⇐ CSS

[Anonymous]

Проблема заключается в том, что когда появляется клавиатура ввода, изменение высоты и чат __edheder поднимается и message-input не поднимается правильно. = "Введите описание изображения здесь" src = "https://i.sstatic.net/z1iqhf65.jpg"/> < /p>
App.vue








< /code>
chat.vue


0" ref="messagesContainer"
@scroll="handleScroll">


< /code>
scss < /p>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body,
html {
background-color: var(--primary-color);
margin: 0;
height: 100vh;
overflow: hidden;
}

.app {
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}

.chat {
display: flex;
flex-direction: column;
height: 100vh;
opacity: 0;
visibility: hidden;
&__header {
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-color);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
&__messages {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: #f4f4f4;
padding: 20px 10px;
margin-block: 54px;
}
&__message-input {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
overflow: hidden;
background-color: var(--primary-color);
padding-bottom: calc(env(safe-area-inset-bottom) + 0px);
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... eb-app-vue