tg app fix sizes

src/components/settings/RecurrentyCreateUpdate.vue

@@ -84,11 +84,11 @@ function handlePaste(e: ClipboardEvent) {
   recurrentAmount.value = isNaN(num) ? 0 : num
 }
 const tgApp = (window as any)?.Telegram?.WebApp;
-const insetTop = ref(2)
+const insetTop = ref(54)
 
 onMounted(async () => {
   if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
-    insetTop.value = tgApp.safeAreaInset.top
+    insetTop.value = tgApp.contentSafeAreaInset.top
   }
 
   await fetchData()
@@ -109,7 +109,6 @@ onMounted(async () => {
 </script>
 
 <template>
-  {{insetTop}}
   <div v-if="categories.length===0" class="card !gap-4 !p-10">
     <span class="">No categories available.</span>
     <span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span>
@@ -118,7 +117,7 @@ onMounted(async () => {
     <!-- Fixed modal container -->
     <div v-if="isCategorySelectorOpened" class="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto"
          style="background-color: var(--primary-color); "
-         :style="tgApp ? `padding-top: ${insetTop}rem !important` : 'padding-top: 2rem !important'">
+         :style="tgApp ? `padding-top: ${insetTop}px !important` : 'padding-top: 2rem !important'">
       <div class="w-full max-w-md">
         <div class="card justify-items-start justify-start">
           <div v-for="(cat, idx) in categories" :key="cat.id"