From 89190e9c228c20537cda0d1a5d63fb76851d5094 Mon Sep 17 00:00:00 2001
From: ochafik <ochafik@google.com>
Date: Sun, 26 Mar 2023 09:22:35 +0100
Subject: [PATCH] Hack for iphone 100vh issue: put footer on top and reserve
 space at the bottom optimistically

---
 src/App.tsx | 28 +++++++++-------------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7839c93..b3b71c7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -476,30 +476,20 @@ export function App({initialState, fs}: {initialState: State, fs: FS}) {
     }
   }
 
+  const isIPhone = /iPhone/.test(navigator.userAgent)
   return (
     <ModelContext.Provider value={model}>
       <FSContext.Provider value={fs}>
-        <div className='flex flex-column' style={{height: '100vh'}}>
-          <div className=""
-              // style={{
-              //   backgroundImage: 'url("logo192.png")',
-              //   backgroundPositionX: 'left',
-              //   backgroundPositionY: 'top',
-              //   backgroundRepeat: 'no-repeat',
-              // }}
-              >
-
-            
-            {/* <h1>
-              OpenSCAD
-            </h1> */}
+        <div className='flex flex-column' style={{
+            // height: '100vh'
+            // maxHeight: '-webkit-fill-available',
+            height: isIPhone ? "calc(100vh - 80px - env(safe-area-inset-bottom) - env(safe-area-inset-top))" : '100vh'
+          }}>
+          {isIPhone && <Footer />}
+          <div className="">
             <div className='flex flex-row' style={{
-              // justifyContent: 'center',
               margin: '5px',
-              // marginTop: '70px',
             }}>
-                    
-              {/* <span style={{flex: 1}} /> */}
 
               {state.view.layout.mode === 'multi'
                 ?   <div className='flex flex-row gap-1' style={{
@@ -553,7 +543,7 @@ export function App({initialState, fs}: {initialState: State, fs: FS}) {
             {/* <CustomizerPanel className={`${getPanelClasses('customizer')} absolute-fill`} style={getPanelStyle('customizer')} /> */}
           </div>
 
-          <Footer />
+          {!isIPhone && <Footer />}
         </div>
       </FSContext.Provider>
     </ModelContext.Provider>