CB-4275 feat: app height set via js

webapp/packages/core-app/src/Body.m.css

@@ -1,8 +1,8 @@
 .bodyContent {
-    composes: theme-background-surface theme-text-on-surface theme-typography from global;
-    height: 100vh;
-    display: flex;
-    padding: 0 !important;
-    flex-direction: column;
-    overflow: hidden;
+  composes: theme-background-surface theme-text-on-surface theme-typography from global;
+  height: var(--app-height);
+  display: flex;
+  padding: 0 !important;
+  flex-direction: column;
+  overflow: hidden;
 }

webapp/packages/core-app/src/Body.tsx

@@ -17,6 +17,7 @@ import { SessionPermissionsResource } from '@cloudbeaver/core-root';
 import { ScreenService } from '@cloudbeaver/core-routing';
 import { ThemeService } from '@cloudbeaver/core-theming';
 import { DNDProvider } from '@cloudbeaver/core-ui';
+import { throttle } from '@cloudbeaver/core-utils';
 import { useAppVersion } from '@cloudbeaver/core-version';
 
 import style from './Body.m.css';
@@ -34,6 +35,12 @@ export const Body = observer(function Body() {
   // TODO: must be loaded in place where it is used
   useResource(Body, ProjectInfoResource, CachedMapAllKey, { silent: true });
 
+  // we need it because 100vh cuts the bottom of the page on mobile devices
+  const handleBodyHeight = throttle(() => {
+    const doc = document.documentElement;
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`);
+  }, 50);
+
   // sync classes from theme with body for popup components and etc
   useLayoutEffect(() => {
     if (ref.current) {
@@ -42,6 +49,15 @@ export const Body = observer(function Body() {
     document.documentElement.dataset.backendVersion = backendVersion;
   });
 
+  useLayoutEffect(() => {
+    handleBodyHeight();
+    window.addEventListener('resize', handleBodyHeight);
+
+    return () => {
+      window.removeEventListener('resize', handleBodyHeight);
+    };
+  }, []);
+
   return (
     <DNDProvider>
       <Loader suspense>

webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css

@@ -21,7 +21,7 @@
   &.small {
     min-width: 404px;
     min-height: 262px;
-    max-height: max(100vh - 48px, 262px);
+    max-height: max(var(--app-height) - 48px, 262px);
 
     &.fixedSize {
       width: 404px;
@@ -34,7 +34,7 @@
   &.medium {
     min-width: 576px;
     min-height: 374px;
-    max-height: max(100vh - 48px, 374px);
+    max-height: max(var(--app-height) - 48px, 374px);
 
     &.fixedSize {
       width: 576px;
@@ -47,7 +47,7 @@
   &.large {
     min-width: 720px;
     min-height: 468px;
-    max-height: max(100vh - 48px, 468px);
+    max-height: max(var(--app-height) - 48px, 468px);
 
     &.fixedSize {
       width: 720px;

webapp/packages/core-blocks/src/DisplayError.m.css

@@ -5,7 +5,7 @@
   overflow: auto;
 
   &.root {
-    height: 100vh;
+    height: var(--app-height);
   }
 }
 .errorInnerBlock {

webapp/packages/core-bootstrap/src/renderLayout.m.css

@@ -1,3 +1,3 @@
 .loader {
-  height: 100vh;
-}
+  height: var(--app-height);
+}

webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css

@@ -1,6 +1,6 @@
 .wrapper {
   min-height: 520px !important;
-  max-height: max(100vh - 48px, 520px) !important;
+  max-height: max(var(--app-height) - 48px, 520px) !important;
 }
 .submittingForm {
   overflow: auto;