How can I adjust fixed element positioning when the mobile keyboard appears in my Vue Telegram WebApp?

This issue is often caused by using fixed CSS positioning with a viewport defined as 100vh. On mobile devices, when the keyboard appears the visual viewport shrinks, but the layout viewport (100vh) may not update as expected. In your case, the chat header (fixed to the top) moves correctly with the change, but the fixed message input remains anchored to the original bottom of the layout viewport.

Below are some approaches you can try:

---

1. Use Dynamic Viewport Units

Some newer CSS viewport units are designed to handle mobile browser quirks better. For example, using 100dvh (dynamic viewport height) instead of 100vh may help:

SCSSCopied
body, html {
  background-color: var(--primary-color);
  margin: 0;
  height: 100dvh; // Uses the dynamic viewport height
  overflow: hidden;
}

Note: Check browser support for dynamic viewport units (100dvh) to ensure compatibility.

---

2. Listen to Resize Events

You can detect when the window resizes (which happens when the keyboard appears) and update the bottom position of your message input accordingly. For example, in your Chat.vue component you can add a watcher or event listener:

VUECopied
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const messageInputBottom = ref(0)

// Optionally, use a utility function to calculate bottom inset. 
// If your mobile browser exposes the visual viewport height, you can compare it.
function updateInputPosition() {
  // Calculate the difference between innerHeight and document.documentElement.clientHeight
  // You might need to adjust this logic based on your testing.
  const bottomInset = window.innerHeight - document.documentElement.clientHeight
  messageInputBottom.value = bottomInset
}

onMounted(() => {
  window.addEventListener('resize', updateInputPosition)
  updateInputPosition()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateInputPosition)
})
</script>

<template>
  <div class="chat" :class="{ 'is-ready': isReady }" v-if="chatStore.chat && chatLoad == LoadState.LOADED">
    <div class="chat__header"></div>
    <div
      class="chat__messages"
      v-if="Object.keys(chatStore.chat.messages).length > 0"
      ref="messagesContainer"
      @scroll="handleScroll"
    ></div>
    <div class="chat__message-input" ref="messageInput" :style="{ bottom: messageInputBottom + 'px' }"></div>
  </div>
</template>

This example listens for resize events and adjusts the bottom position of the message input. You might need to fine-tune the calculation depending on your specific mobile behavior.

---

3. Consider Changing the Positioning Strategy

If using fixed positioning proves to be too brittle across devices, you could refactor the layout so that the chat container adjusts its height when the keyboard is open. For instance, the chat could use flex layout with a footer that always stays at the bottom of the visible area:

VUECopied
<template>
  <div class="chat" v-if="chatStore.chat && chatLoad == LoadState.LOADED">
    <div class="chat__header"></div>
    <div class="chat__messages" ref="messagesContainer" @scroll="handleScroll"></div>
    <div class="chat__message-input"></div>
  </div>
</template>

<style scoped>
.chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat__header {
  /* header styles */
}

.chat__messages {
  flex: 1;
  overflow-y: auto;
}

.chat__message-input {
  /* Instead of fixed, let flexbox keep it at the bottom */
}
</style>

In this model, when the keyboard appears and the viewport height changes, the flex container should adjust automatically. However, you might need additional handling for scroll issues.

---

Summary

The behavior you’re seeing is common when mixing fixed positioning with mobile viewport quirks. Try using dynamic viewport units, listen for resize events to adjust styling, or change the layout to use flex-based positioning. Each approach has tradeoffs, so testing on your target devices is essential.

Let me know if you need further details on any of these solutions!