From 44c00a55479d5949d870e64175ea5b0b234fe955 Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Sun, 1 Dec 2024 19:53:56 +0200
Subject: [PATCH] fix: fullscreen on viewport (#278)

* fix: fullscreen on viewport

* chore: padding top

* chore: hide scroll
---
 apps/telegram-game/package.json                |  2 +-
 apps/telegram-game/src/assets/main.css         |  7 +++++++
 apps/telegram-game/src/assets/telegram.css     |  4 ++++
 apps/telegram-game/src/components/Game.vue     |  2 +-
 .../src/components/PageContainer.vue           |  2 +-
 apps/telegram-game/src/init.ts                 |  2 --
 pnpm-lock.yaml                                 | 18 +++++++++---------
 7 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/apps/telegram-game/package.json b/apps/telegram-game/package.json
index 5d42c00..ab4705e 100644
--- a/apps/telegram-game/package.json
+++ b/apps/telegram-game/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@chat-game/game": "workspace:*",
     "@chat-game/types": "workspace:*",
-    "@telegram-apps/sdk-vue": "^1.0.5",
+    "@telegram-apps/sdk-vue": "^1.0.6",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
diff --git a/apps/telegram-game/src/assets/main.css b/apps/telegram-game/src/assets/main.css
index 52b24b2..7292b97 100644
--- a/apps/telegram-game/src/assets/main.css
+++ b/apps/telegram-game/src/assets/main.css
@@ -19,6 +19,8 @@
   --tg-theme-link-color: #168dcd;
   --tg-theme-accent-text-color: #168dcd;
   --tg-theme-destructive-text-color: #d14e4e;
+
+  --tg-content-safe-area-inset-top: 100;
 }
 
 @utility tg-bg {
@@ -64,4 +66,9 @@
 }
 @utility tg-section-separator {
   color: var(--tg-theme-section-separator-color);
+}
+
+@utility tg-content-safe-area {
+  padding-top: calc(var(--tg-content-safe-area-inset-top) * 1px);
+  padding-bottom: 200px;
 }
\ No newline at end of file
diff --git a/apps/telegram-game/src/assets/telegram.css b/apps/telegram-game/src/assets/telegram.css
index f18f037..b0502e7 100644
--- a/apps/telegram-game/src/assets/telegram.css
+++ b/apps/telegram-game/src/assets/telegram.css
@@ -8,3 +8,7 @@ html, body, #app {
   /* Preserve scrolling behavior */
   overflow-y: auto;
 }
+#app::-webkit-scrollbar {
+  display: none;
+  width: 0;
+}
diff --git a/apps/telegram-game/src/components/Game.vue b/apps/telegram-game/src/components/Game.vue
index bb99b82..35a4b6f 100644
--- a/apps/telegram-game/src/components/Game.vue
+++ b/apps/telegram-game/src/components/Game.vue
@@ -2,7 +2,7 @@
   <div class="game-block absolute top-0 left-0 right-0 bottom-0 font-serif" :class="{ hidden: !isOpened }">
     <div id="game-canvas" ref="stage" />
 
-    <div class="font-serif touch-pan-x absolute top-0 left-0 right-0 w-full h-16 py-2">
+    <div class="font-serif touch-pan-x absolute top-0 left-0 right-0 w-full h-16 pt-25">
       <div class="max-w-[28rem] mx-auto px-5">
         <div>Монеты: 53</div>
         <div>Энергия: 41</div>
diff --git a/apps/telegram-game/src/components/PageContainer.vue b/apps/telegram-game/src/components/PageContainer.vue
index b6709e1..5ff99e4 100644
--- a/apps/telegram-game/src/components/PageContainer.vue
+++ b/apps/telegram-game/src/components/PageContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tg-secondary-bg tg-text z-30 h-full min-h-dvh w-full pt-20 pb-40 font-serif">
+  <div class="tg-secondary-bg tg-text tg-content-safe-area overflow-hidden z-30 h-full min-h-dvh w-full font-serif">
     <div class="px-4 py-2 max-w-[28rem] mx-auto flex flex-col">
       <slot />
     </div>
diff --git a/apps/telegram-game/src/init.ts b/apps/telegram-game/src/init.ts
index efc2af0..a0cd9ce 100644
--- a/apps/telegram-game/src/init.ts
+++ b/apps/telegram-game/src/init.ts
@@ -3,7 +3,6 @@ import {
   backButton,
   closingBehavior,
   disableVerticalSwipes,
-  fullScreen,
   initData,
   init as initSDK,
   miniApp,
@@ -33,7 +32,6 @@ export function init(debug: boolean): void {
   miniApp.mount()
   themeParams.mount()
   swipeBehavior.mount()
-  fullScreen.mount()
   closingBehavior.mount()
   initData.restore()
   void viewport
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8980248..7aaf86d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,8 +48,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/types
       '@telegram-apps/sdk-vue':
-        specifier: ^1.0.5
-        version: 1.0.5(vue@3.5.13(typescript@5.6.2))
+        specifier: ^1.0.6
+        version: 1.0.6(vue@3.5.13(typescript@5.6.2))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.6.2)
@@ -1631,13 +1631,13 @@ packages:
   '@telegram-apps/navigation@1.0.6':
     resolution: {integrity: sha512-r1VHoYjZ0RBSfk+ltokNHM1VX3vnKlN6pAWH6qjw/XQTGy4Rlp9w6IyqUPgtENWLKop//QT+xIumfmZRCIMwbA==}
 
-  '@telegram-apps/sdk-vue@1.0.5':
-    resolution: {integrity: sha512-dZekgflzpo0BQWTbLrhTeOTPe2KaprMr8Ka+B5Z22e4CuSUkVFnLhnms4v/JpjwOdV5VcxdqQsMcO5icRL33+g==}
+  '@telegram-apps/sdk-vue@1.0.6':
+    resolution: {integrity: sha512-v75FlE0VrNKJAFSjmoJpVk0CEunU03YGG9mdfBWDDbkEIhe0v41o1sV7grImUrMEiSu9x2OdhjLWQD26QN2znw==}
     peerDependencies:
       vue: ^3.0.0
 
-  '@telegram-apps/sdk@2.7.0':
-    resolution: {integrity: sha512-Hv54EguXFIEZIN2ZvobF6yyXfSHblbpml9fI80mLjxDJQrFxOjTsRZig7Rx66srJBEulokH2eyoNLV0gobdAMA==}
+  '@telegram-apps/sdk@2.7.1':
+    resolution: {integrity: sha512-Ze8HILMc2yKpXiR4hOdejZxBYErXKZK2E0ZJo6GHGpnTxMgzzYtW5TcG6aPhUqek5ytko+uHyscnPXoe7QdIqA==}
 
   '@telegram-apps/signals@1.1.0':
     resolution: {integrity: sha512-5qN7cU8t3l7n0cKcnzc/1TYKJTwAggUinfwbLHL1SYmB47pBHjCvfsRiYliFohk6lb635SBmNuVZL6LHFmGZaw==}
@@ -7224,12 +7224,12 @@ snapshots:
       '@telegram-apps/signals': 1.1.0
       '@telegram-apps/toolkit': 1.0.0
 
-  '@telegram-apps/sdk-vue@1.0.5(vue@3.5.13(typescript@5.6.2))':
+  '@telegram-apps/sdk-vue@1.0.6(vue@3.5.13(typescript@5.6.2))':
     dependencies:
-      '@telegram-apps/sdk': 2.7.0
+      '@telegram-apps/sdk': 2.7.1
       vue: 3.5.13(typescript@5.6.2)
 
-  '@telegram-apps/sdk@2.7.0':
+  '@telegram-apps/sdk@2.7.1':
     dependencies:
       '@telegram-apps/bridge': 1.5.0
       '@telegram-apps/navigation': 1.0.6