tg app fix sizes

src/components/settings/RecurrentyCreateUpdate.vue

@@ -83,9 +83,14 @@ function handlePaste(e: ClipboardEvent) {
   const num = Number(text)
   recurrentAmount.value = isNaN(num) ? 0 : num
 }
-
+const tgApp = (window as any)?.Telegram?.WebApp;
+const insetTop = ref(2)
 
 onMounted(async () => {
+  if (tgApp && ['ios', 'android'].includes(tgApp.platform)) {
+    insetTop.value = tgApp.safeAreaInset.top
+  }
+
   await fetchData()
   if (mode.value === "edit") {
 
@@ -111,7 +116,9 @@ onMounted(async () => {
   </div>
   <div v-else class="flex flex-col w-full justify-items-start gap-7">
     <!-- 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)">
+    <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'">
       <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"
@@ -179,7 +186,8 @@ onMounted(async () => {
       <label class="!font-semibold  text-gray-600 !pl-2">Recurrent date</label>
       <div class="card !justify-start !items-start !pl-2">
         <div class="!grid !grid-cols-7 gap-2">
-          <div v-for="i in 31" class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full cursor-pointer flex"
+          <div v-for="i in 31"
+               class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full cursor-pointer flex"
                :class="recurrentDate == i ? 'bg-green-200' : 'bg-gray-100'"
                @click="recurrentDate=i">
             {{ i }}