Merge pull request #2259 from dbeaver/CB-4275-inconsistent-mobile-rendering

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

@@ -20,6 +20,7 @@ import { DNDProvider } from '@cloudbeaver/core-ui';
 import { useAppVersion } from '@cloudbeaver/core-version';
 
 import style from './Body.m.css';
+import { useAppHeight } from './useAppHeight';
 
 export const Body = observer(function Body() {
   // const serverConfigLoader = useResource(Body, ServerConfigResource, undefined);
@@ -42,6 +43,8 @@ export const Body = observer(function Body() {
     document.documentElement.dataset.backendVersion = backendVersion;
   });
 
+  useAppHeight();
+
   return (
     <DNDProvider>
       <Loader suspense>

webapp/packages/core-app/src/useAppHeight.ts

@@ -0,0 +1,27 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { useLayoutEffect } from 'react';
+
+import { throttle } from '@cloudbeaver/core-utils';
+
+// 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);
+
+export function useAppHeight() {
+  useLayoutEffect(() => {
+    handleBodyHeight();
+    window.addEventListener('resize', handleBodyHeight);
+
+    return () => {
+      window.removeEventListener('resize', handleBodyHeight);
+    };
+  });
+}

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/core-theming/src/styles/_variables.scss

@@ -26,20 +26,21 @@ $mdc-theme-extra-property-values: (
 
 $mdc-theme-property-values: map-merge($mdc-theme-property-values, $mdc-theme-extra-property-values);
 
-$theme-class: "theme-#{$theme-name}";
+$theme-class: 'theme-#{$theme-name}';
 $theme-form-element-radius: 3px !default;
 $theme-group-element-radius: 4px !default;
 $theme-menu-bar-small-action-radius: 3px !default;
+$app-height: 100vh !default;
 
 @mixin css-variables {
   .theme-form-element-radius {
     border-radius: $theme-form-element-radius;
   }
-  
+
   .theme-group-element-radius {
     border-radius: $theme-group-element-radius;
   }
-  
+
   .theme-menu-bar-small-action-radius {
     border-radius: $theme-menu-bar-small-action-radius;
   }

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;