fix: fix dock layout

frontend/spa/src/App.vue

@@ -1,34 +1,31 @@
 <template>
-  <div class="drawer h-full">
-    <input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen"/>
+  <div class="app-container">
+    <header class="app-header bg-base-200 w-full"></header>
 
-    <div class="drawer-content">
-      <div class="app-container">
-        <header class="app-header bg-base-200 w-full"></header>
+    <section class="app-content">
+      <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
 
-        <section class="telecart-main-section">
-          <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
-
-          <div class="fixed inset-0 z-50 bg-white flex items-center justify-center text-center p-4
+      <div class="fixed inset-0 z-50 bg-white flex items-center justify-center text-center p-4
             [@supports(color:oklch(0%_0_0))]:hidden">
-            <BrowserNotSupported/>
-          </div>
+        <BrowserNotSupported/>
+      </div>
 
-          <AppDebugMessage v-if="settings.app_debug"/>
+      <AppDebugMessage v-if="settings.app_debug"/>
 
-          <RouterView v-slot="{ Component, route }">
-            <KeepAlive include="Home,Products" :key="filtersStore.paramsHashForRouter">
-              <component :is="Component" :key="route.fullPath"/>
-            </KeepAlive>
-          </RouterView>
+      <RouterView v-slot="{ Component, route }">
+        <KeepAlive include="Home,Products" :key="filtersStore.paramsHashForRouter">
+          <component :is="Component" :key="route.fullPath"/>
+        </KeepAlive>
+      </RouterView>
 
-          <PrivacyPolicy v-if="! settings.is_privacy_consented"/>
+      <PrivacyPolicy v-if="! settings.is_privacy_consented"/>
 
-          <Dock v-if="isAppDockShown"/>
+      <Dock v-if="isAppDockShown"/>
+      <div class="dock-spacer bg-base-100 z-50"></div>
 
-          <div
-              v-if="swiperBack.isActive.value"
-              class="fixed top-1/2 left-0 z-50
+      <div
+          v-if="swiperBack.isActive.value"
+          class="fixed top-1/2 left-0 z-50
          w-20
          h-20
          -translate-y-1/2
@@ -39,29 +36,18 @@
          py-2
          text-primary-content
         "
-              :class="{
+          :class="{
                 'bg-primary': swiperBack.deltaX.value < swiperBack.ACTIVATION_THRESHOLD,
                 'bg-accent': swiperBack.deltaX.value >= swiperBack.ACTIVATION_THRESHOLD,
               }"
-              :style="{ transform: `translate(${easeOut(swiperBack.deltaX.value/10, 30)}px, -50%)` }"
+          :style="{ transform: `translate(${easeOut(swiperBack.deltaX.value/10, 30)}px, -50%)` }"
 
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-            </svg>
-          </div>
-        </section>
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+        </svg>
       </div>
-    </div>
-
-    <div class="drawer-side z-50 safe-top">
-      <label for="app-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
-      <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
-        <li><a href="#">🏠 Главная</a></li>
-        <li><a href="#">🛒 Корзина</a></li>
-        <li><a @click="drawerOpen = false">❌ Закрыть</a></li>
-      </ul>
-    </div>
+    </section>
   </div>
 </template>
 
@@ -72,12 +58,11 @@ import {useRoute, useRouter} from "vue-router";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
 import {useKeyboardStore} from "@/stores/KeyboardStore.js";
-import CartButton from "@/components/CartButton.vue";
 import Dock from "@/components/Dock.vue";
 import AppDebugMessage from "@/components/AppDebugMessage.vue";
 import PrivacyPolicy from "@/components/PrivacyPolicy.vue";
-import {useSwipeBack} from "@/composables/useSwipeBack.js";
 import BrowserNotSupported from "@/BrowserNotSupported.vue";
+import {useSwipeBack} from "@/composables/useSwipeBack.js";
 
 const tg = useMiniApp();
 const platform = ref();
@@ -93,9 +78,6 @@ const filtersStore = useProductFiltersStore();
 const keyboardStore = useKeyboardStore();
 const backButton = window.Telegram.WebApp.BackButton;
 const haptic = window.Telegram.WebApp.HapticFeedback;
-const drawerOpen = ref(false);
-
-// Инициализация жеста Swipe Back (без визуального индикатора)
 const swiperBack = useSwipeBack();
 
 const routesToHideAppDock = [
@@ -127,10 +109,6 @@ function navigateBack() {
   router.back();
 }
 
-function toggleDrawer() {
-  drawerOpen.value = !drawerOpen.value;
-}
-
 watch(
     () => route.name,
     () => {
@@ -151,6 +129,16 @@ function handleClickOutside(e) {
   }
 }
 
+watch(
+    () => route.name,
+    (name) => {
+      let height = '72px'; // дефолт
+      if (name === 'product.show') height = '146px';
+      document.documentElement.style.setProperty('--dock-height', height);
+    },
+    { immediate: true }
+);
+
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside);
 });
@@ -159,3 +147,19 @@ onMounted(() => {
   document.addEventListener('click', handleClickOutside);
 });
 </script>
+
+<style scoped>
+.dock-spacer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  height: calc(
+      var(--tg-content-safe-area-inset-bottom, 0px)
+      + var(--tg-safe-area-inset-bottom, 0px)
+  );
+
+  pointer-events: none;
+}
+</style>