diff --git a/src/activities/activities.scss b/src/activities/activities.scss
index ddc8f1e0..091c657e 100644
--- a/src/activities/activities.scss
+++ b/src/activities/activities.scss
@@ -38,7 +38,7 @@
top: 0px;
// FIXME: this should be a variable
left: 47px;
- height: 100%;
+ height: calc(100% - pb.$status-bar-height);
z-index: bp.$pt-z-index-overlay;
}
}
diff --git a/src/app/app.scss b/src/app/app.scss
index f3bee846..0372b916 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -16,6 +16,8 @@
width: 100%;
height: 100%;
background-color: bp.$pt-app-background-color;
+ display: flex;
+ flex-direction: column;
.#{bp.$ns}-dark & {
background-color: bp.$pt-dark-app-background-color;
@@ -52,9 +54,9 @@
}
.pb-app-body {
- // height makes everything fit without scrolling
- height: calc(var(--pb-vh, 100vh) - #{pb.$status-bar-height}) !important;
- position: relative;
+ min-height: 0;
+ flex: 1 1 auto;
+
display: flex;
flex-direction: row;
diff --git a/src/components/ViewHeightSensor.test.tsx b/src/components/ViewHeightSensor.test.tsx
deleted file mode 100644
index bca09b88..00000000
--- a/src/components/ViewHeightSensor.test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
-
-import { render } from '@testing-library/react';
-import React from 'react';
-import ViewHeightSensor from './ViewHeightSensor';
-
-it('should set the --pb-vh variable on resize', () => {
- render();
- // REVISIT: it is not easy to test the resize event since jest-dom doesn't do layout
-});
diff --git a/src/components/ViewHeightSensor.tsx b/src/components/ViewHeightSensor.tsx
deleted file mode 100644
index 2fcf6b52..00000000
--- a/src/components/ViewHeightSensor.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-/* This is a hack for correctly sizing to view height on mobile when not running in fullscreen mode. */
-
-import { ResizeSensor } from '@blueprintjs/core';
-import React from 'react';
-
-/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
-
-function ViewHeightSensor(): JSX.Element {
- return (
- {
- document.documentElement.style.setProperty(
- '--pb-vh',
- `${e[0].contentRect.height}px`,
- );
- }}
- >
-
-
- );
-}
-
-export default ViewHeightSensor;
diff --git a/src/index.scss b/src/index.scss
index 77408b47..009dbb9a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -12,10 +12,6 @@
@use 'variables' as pb;
@use '@blueprintjs/core/lib/scss/variables' as bp;
-:root {
- --pb-vh: 100vh;
-}
-
// use :focus-visible instead of :focus (so we don't need blueprint.js focus style manager)
:focus {
@@ -48,6 +44,19 @@ body {
// no scrolling of the page
overflow: hidden;
user-select: none;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+}
+
+#root {
+ width: 100%;
+ height: 100%;
+
+ & [data-overlay-container] {
+ width: 100%;
+ height: 100%;
+ }
}
// Utility classes - do not use these in new code!
diff --git a/src/index.tsx b/src/index.tsx
index 6370d73f..4fe668e4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,7 +13,6 @@ import { createLogger } from 'redux-logger';
import createSagaMiddleware from 'redux-saga';
import App from './app/App';
import { appVersion } from './app/constants';
-import ViewHeightSensor from './components/ViewHeightSensor';
import { db } from './fileStorage/context';
import { i18nManager } from './i18n';
import { rootReducer } from './reducers';
@@ -95,7 +94,6 @@ ReactDOM.render(
-
diff --git a/src/status-bar/status-bar.scss b/src/status-bar/status-bar.scss
index 622cfd2c..43768059 100644
--- a/src/status-bar/status-bar.scss
+++ b/src/status-bar/status-bar.scss
@@ -7,8 +7,6 @@
@use '../variables' as pb;
.pb-status-bar {
- position: fixed;
- top: calc(var(--pb-vh, 100vh) - #{pb.$status-bar-height});
background-color: pb.$pybricks-blue;
height: pb.$status-bar-height;
width: 100vw;