Fix window height for webkit browsers where browser nav bar has the show/hide feature

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "include-media": "^1.4.10",
     "inversify": "^6.0.1",
+    "jest-environment-jsdom": "^29.6.2",
     "lodash": "^4.17.21",
     "reflect-metadata": "^0.1.13",
     "vue": "^3.2.41",

src/JMDK.UI/infrastructure/helpers/browser/window-height.ts

@@ -0,0 +1,19 @@
+const WINDOW_HEIGHT_CSS_VAR = '--window-height'
+
+export function useWindowHeightVariable() {
+  function setWindowHeightVariable() {
+    document.documentElement.style.setProperty(
+      WINDOW_HEIGHT_CSS_VAR,
+      `${window.innerHeight / 100}px`
+    )
+  }
+
+  setWindowHeightVariable()
+  window.addEventListener('resize', setWindowHeightVariable)
+  window.addEventListener('orientationchange', setWindowHeightVariable)
+
+  return function dispose() {
+    window.removeEventListener('resize', setWindowHeightVariable)
+    window.removeEventListener('orientationchange', setWindowHeightVariable)
+  }
+}

src/JMDK.UI/views/home-view/home-view.scss

@@ -1,7 +1,8 @@
-$heightExcludingNav: calc(100vh - 48px);
+$navHeight: 48px;
+$window-height-var: --window-height;
 
 .home-view {
-  height: $heightExcludingNav;
+  height: calc(var($window-height-var, 1vh) * 100 - $navHeight);
   display: flex;
   align-items: center;
   justify-content: center;

src/JMDK.UI/views/home-view/home-view.vue

@@ -42,10 +42,13 @@
 import JButton from '@/JMDK.UI/components/j-button/j-button.vue'
 import { container } from '@/JMDK.Core/ioc'
 import { HomeViewPresenter } from './presenter/home-view-presenter'
+import { onBeforeUnmount } from 'vue'
 
 const presenter = container.get(HomeViewPresenter)
 const viewModel = presenter.viewModel
 
+onBeforeUnmount(() => presenter.destroy())
+
 presenter.attachView({
   props: {},
 })

src/JMDK.UI/views/home-view/presenter/home-view-presenter.test.ts

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import { container } from '@/JMDK.Core/ioc'
 import { HomeViewPresenter } from './home-view-presenter'
 import { expect, it, beforeAll, afterAll } from '@jest/globals'

src/JMDK.UI/views/home-view/presenter/home-view-presenter.ts

@@ -5,13 +5,22 @@ import { PresenterBase } from '@/JMDK.UI/infrastructure/presenter'
 import type { ViewModel } from './view-model'
 import { reactive } from 'vue'
 import { readonlyComputed } from '@/JMDK.Core/helpers/readonly-computed'
+import { useWindowHeightVariable } from '@/JMDK.UI/infrastructure/helpers/browser/window-height'
 
 type View = {
   props: {}
 }
 
 @injectable()
 export class HomeViewPresenter extends PresenterBase<View> {
+  constructor() {
+    super()
+    const removeEventListeners = useWindowHeightVariable()
+    this.disposers.push(removeEventListeners)
+  }
+
+  private disposers: Array<() => void> = []
+
   private state = reactive({
     content: contentModel,
   })
@@ -22,5 +31,9 @@ export class HomeViewPresenter extends PresenterBase<View> {
     }
   })
 
+  public destroy() {
+    this.disposers.forEach((dispose) => dispose())
+  }
+
   public openInNewTab = openInNewTab
 }