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;