Fix iOS / iPadOS layouts w/ a funky JS+CSS trick

public/index.html

@@ -51,16 +51,15 @@
     <title>OpenSCAD Playground</title>
     <style>
       #root,
-      body {
+      body,
+      html {
         display: flex;
         flex-direction: column;
         flex: 1;
         margin: 0;
-        position: fixed;
+
-        top: 0;
+        height: 100vh;
-        bottom: 0;
+        height: var(--app-height);
-        left: 0;
-        right: 0;
       }
 
       .p-tabmenu-nav {

src/components/App.tsx

@@ -54,28 +54,13 @@ export function App({initialState, fs}: {initialState: State, fs: FS}) {
       }
     }
   }
-  
-  // TODO: test this again:
-  // body {
-  //   min-height: 100vh;
-  //   min-height: fill-available;
-  //   min-height: -webkit-fill-available;
-  // }
-  // html {
-  //     height: fill-available;
-  //     height: -webkit-fill-available;
-  // }
-  const isIPhone = /iPhone/.test(navigator.userAgent)
 
   return (
     <ModelContext.Provider value={model}>
       <FSContext.Provider value={fs}>
         <div className='flex flex-column' style={{
-            // height: '100vh'
+            flex: 1,
-            // maxHeight: '-webkit-fill-available',
-            height: isIPhone ? "calc(100vh - 80px - env(safe-area-inset-bottom) - env(safe-area-inset-top))" : '100vh'
           }}>
-          {isIPhone && <Footer />}
           
           <PanelSwitcher />
     
@@ -84,7 +69,6 @@ export function App({initialState, fs}: {initialState: State, fs: FS}) {
                 flex: 1,
                 position: 'relative'
               }}>
-                {/* {position: 'relative'}}> */}
 
             <EditorPanel className={`
               opacity-animated
@@ -95,19 +79,9 @@ export function App({initialState, fs}: {initialState: State, fs: FS}) {
             {/* <CustomizerPanel className={`${getPanelClasses('customizer')} absolute-fill`} style={getPanelStyle('customizer')} /> */}
           </div>
 
-          {!isIPhone && <Footer />}
+          <Footer />
         </div>
       </FSContext.Provider>
     </ModelContext.Provider>
   );
-}
+}
-
-        // <Splitter style={{ flex: 1 }}>
-        //     <SplitterPanel className="flex flex-column align-items-center justify-content-center">
-        //       <EditorPanel />
-        //     </SplitterPanel>
-        //     <SplitterPanel className="flex flex-column align-items-center justify-content-center">
-        //       <ViewerPanel/>
-        //     </SplitterPanel>
-        // </Splitter>
-        // <Footer />

src/index.tsx

@@ -11,6 +11,7 @@ import { createInitialState } from './state/initial-state';
 import './index.css';
 
 import debug from 'debug';
+import { registerCustomAppHeightCSSProperty } from './utils';
 const log = debug('app:log');
 
 if (process.env.NODE_ENV !== 'production') {
@@ -21,7 +22,8 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 (async () => {
-  
+  registerCustomAppHeightCSSProperty();
+
   const fs = await createEditorFS('/');
   await registerOpenSCADLanguage(fs, '/', zipArchives);
 

src/utils.ts

@@ -86,4 +86,14 @@ export function formatMillis(n: number) {
     return `${Math.floor(n)}ms`;
 
   return `${Math.floor(n / 100) / 10}sec`;
+}
+
+// https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
+export function registerCustomAppHeightCSSProperty() {
+  const updateAppHeight = () => {
+    const doc = document.documentElement
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
+  }
+  window.addEventListener('resize', updateAppHeight)
+  updateAppHeight();
 }