fix scroll on ios

apps/frontend/src/layouts/LayoutWithTabs.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden">
+  <div
+    class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden touch-none"
+  >
     <div
-      class="flex overflow-auto pb-safe-or-4 sm:pt-safe px-4 touch-pan-y"
+      class="flex overflow-hidden overflow-y-scroll scroll-touch pb-safe-or-4 sm:pt-safe px-4 overscroll-contain"
       ref="contentScrollContainer"
     >
       <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
@@ -43,10 +45,52 @@ const scrollToBottom = () => {
   }
 }
 
+// Устанавливаем корректную высоту при загрузке и изменении размера окна
+const onresize = () => {
+  document.documentElement.style.setProperty(
+    '--visual-viewport-offset-top',
+    `${visualViewport!.offsetTop!}px`,
+  )
+  document.documentElement.style.setProperty(
+    '--visual-viewport-height',
+    `${visualViewport!.height}px`,
+  )
+  if (document.activeElement) {
+    if ('scrollIntoViewIfNeeded' in document.activeElement) {
+      ;(document.activeElement.scrollIntoViewIfNeeded as (options?: ScrollIntoViewOptions) => void)(
+        {
+          block: 'center',
+        },
+      )
+    } else {
+      document.activeElement.scrollIntoView({ block: 'center' })
+    }
+  }
+}
+const onresizeOptions: AddEventListenerOptions = { passive: true }
+visualViewport?.addEventListener('resize', onresize, onresizeOptions)
+
 const layoutPageHead = useHead({
-  htmlAttrs: { class: 'overflow-hidden' },
-  bodyAttrs: { class: 'overflow-hidden' },
+  htmlAttrs: { class: 'overflow-hidden overscroll-none touch-none fix-layout-scrolling' },
+  bodyAttrs: { class: 'overflow-hidden overscroll-none touch-none' },
 })
 
-onBeforeUnmount(() => layoutPageHead?.dispose())
+onBeforeUnmount(() => {
+  layoutPageHead?.dispose()
+  visualViewport?.removeEventListener('resize', onresize, onresizeOptions)
+  document.documentElement.style.removeProperty('--visual-viewport-offset-top')
+  document.documentElement.style.removeProperty('--visual-viewport-height')
+})
 </script>
+
+<style scoped>
+::v-global(html.fix-layout-scrolling) {
+  --visual-viewport-height: 100dvh;
+  --visual-viewport-offset-top: 0px;
+  position: fixed;
+  width: 100dvw;
+  height: var(--visual-viewport-height);
+  top: var(--visual-viewport-offset-top);
+  bottom: 0;
+}
+</style>