typo

browser_tests/tests/mobileViewport.spec.ts

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Mobile viewport', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('@mobile App UI is not hidden under mobile browser UI', async ({
+    comfyPage
+  }) => {
+    const viewportSize = await comfyPage.page.viewportSize()
+
+    // Top menu is visible
+    const topMenu = comfyPage.page.locator('.comfyui-menu')
+    await expect(topMenu).toBeVisible()
+
+    // Top menu is not cut off from the top
+    const topMenuBox = await topMenu.boundingBox()
+    expect(topMenuBox?.y).toBeGreaterThanOrEqual(0)
+
+    // Graph is visible
+    const graphView = comfyPage.page.locator('.lgraphcanvas')
+    await expect(graphView).toBeVisible()
+
+    // Graph is not cut off from the bottom
+    const graphViewBox = await graphView.boundingBox()
+    expect(graphViewBox).not.toBeNull()
+    expect(viewportSize).not.toBeNull()
+    expect(graphViewBox!.y + graphViewBox!.height).toBeLessThanOrEqual(
+      viewportSize!.height
+    )
+  })
+})

src/App.vue

@@ -2,7 +2,7 @@
   <router-view />
   <ProgressSpinner
     v-if="isLoading"
-    class="absolute inset-0 flex justify-center items-center h-screen"
+    class="absolute inset-0 flex justify-center items-center h-dvh"
   />
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />

src/assets/css/style.css

@@ -42,7 +42,7 @@
 
 body {
   width: 100vw;
-  height: 100vh;
+  height: 100dvh;
   margin: 0;
   overflow: hidden;
   background: var(--bg-color) var(--bg-img);

src/views/GraphView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="comfyui-body grid h-screen w-screen overflow-hidden">
+  <div class="comfyui-body grid h-dvh w-screen overflow-hidden">
     <div id="comfyui-body-top" class="comfyui-body-top">
       <TopMenubar v-if="useNewMenu === 'Top'" />
     </div>

src/views/layouts/LayoutDefault.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="w-full min-h-screen overflow-hidden relative">
+  <main class="w-full min-h-dvh overflow-hidden relative">
     <router-view />
   </main>
 </template>