фикс табов для IOS

src/App.vue

@@ -15,7 +15,7 @@
         <div class="nav-icon">
           <i class="bi-search"></i>
         </div>
-        <span>Поиск</span>
+        <span class="nav-text">Поиск</span>
       </router-link>
       <router-link to="/chats" class="nav-item" active-class="active">
         <div class="nav-icon">
@@ -24,13 +24,13 @@
             {{ totalUnread < 100 ? totalUnread : '99+' }}
           </span>
         </div>
-        <span>Чаты</span>
+        <span class="nav-text">Чаты</span>
       </router-link>
       <router-link to="/profile" class="nav-item" active-class="active">
         <div class="nav-icon">
           <i class="bi-person"></i>
         </div>
-        <span>Профиль</span>
+        <span class="nav-text">Профиль</span>
       </router-link>
     </nav>
   </div>
@@ -239,14 +239,33 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center; /* Центрируем содержимое по вертикали */
+  justify-content: center;
   text-decoration: none;
   color: #6c757d;
   transition: all 0.2s ease;
-  padding: 4px 0;
+  /* Удаляем отступы, они будут применляться по-другому */
+  padding: 0;
   position: relative;
 }
 
+.nav-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 3px;
+  height: 28px;
+}
+
+/* Оборачиваем текст для лучшего управления */
+.nav-text {
+  font-size: 0.7rem;
+  font-weight: 500;
+  /* Критическое изменение: добавляем отступ чтобы поднять текст выше home indicator */
+  transform: translateY(-10px);
+  display: block;
+}
+
 /* CSS переменные для динамической настройки */
 :root {
   --nav-height: 60px;
@@ -254,26 +273,28 @@ body {
   --safe-area-bottom: 0px;
 }
 
-/* Специальная поддержка для устройств с вырезом (iPhone X и новее) */
+/* Обновленная поддержка для устройств с вырезом (iPhone X и новее) */
 @supports (padding: env(safe-area-inset-bottom)) {
   :root {
     --safe-area-bottom: env(safe-area-inset-bottom, 0px);
   }
   
-  /* Новый подход: делаем навбар выше и поднимаем содержимое вверх */
   .mobile-nav {
     height: calc(var(--nav-height) + var(--safe-area-bottom));
-    padding-bottom: var(--safe-area-bottom); /* Добавляем отступ снизу */
+    padding-bottom: var(--safe-area-bottom);
   }
   
-  /* Контейнер для выравнивания элементов навигации */
   .nav-item {
-    /* Оставляем центрирование, но элементы будут в верхней части увеличенного навбара */
-    transform: translateY(-10px); /* Поднимаем элементы повыше от home indicator */
+    /* Элемент занимает всю высоту панели, включая safe area */
+    height: 100%;
+    /* Добавляем флекс для размещения иконки и текста */
+    display: flex;
+    flex-direction: column;
     justify-content: flex-start;
-    padding-top: 10px; /* Увеличиваем верхний отступ */
+    padding-top: 8px;
   }
   
+  /* Важное изменение - переместить этот селектор за пределы @supports */
   .app-content {
     height: calc(100% - var(--nav-height) - var(--safe-area-bottom));
   }