fix: fullsize popup cropped at the bottom (#508)

fixes #423
resoai · Oct 29, 2020 · 3cfaef8 · 3cfaef8
1 parent 1d21e7b
commit 3cfaef8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/scripts/controllers/main.js b/scripts/controllers/main.js
@@ -72,6 +72,13 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
       }
    }
 
+   function innerHeightToCSS () {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+   }
+   innerHeightToCSS();
+   window.addEventListener('resize', debounce(innerHeightToCSS, 250));
+
    $scope.entityClick = function (page, item, entity) {
       if (typeof item.action === 'function') {
          return callFunction(item.action, [item, entity]);

diff --git a/styles/main.less b/styles/main.less
@@ -1328,7 +1328,7 @@ camera_stream {
       /* min-width, if container is sized by title */
       min-width: calc(100% - 2*@popupPadding);
       /* absolute max-height */
-      max-height: calc(100vh - @popupTitleHeight - 2*@popupMargin - 2*@popupPadding);
+      max-height: calc(100*var(--vh, 1vh) - @popupTitleHeight - 2*@popupMargin - 2*@popupPadding);
       /* default size to fill screen */
       height: 100vh;
       width: 100vw;