fix: fullscreen on viewport (#278)

* fix: fullscreen on viewport

* chore: padding top

* chore: hide scroll

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"
   },

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;
 }

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;
+}

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>

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>

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