Mobile height fix

src/components/menu/BottomNav.tsx

@@ -101,7 +101,6 @@ export const BottomNav = (): JSX.Element => {
 
       <div className="flex-grow">
         <BottomNavItem
-          tooltip="Toggle Navigation"
           onClick={(): void => {
             dispatch(toggleMobileNav());
           }}

src/components/menu/BottomNavItem.tsx

@@ -5,7 +5,7 @@ import { m } from 'framer-motion';
 import { Tooltip } from '@components/generic/Tooltip';
 
 export interface BottomNavItemProps {
-  tooltip: string;
+  tooltip?: string;
   onClick?: () => void;
   className?: string;
   children: React.ReactNode;

src/components/modals/VersionInfo.tsx

@@ -70,6 +70,7 @@ export const VersionInfo = ({
         <Modal
           title="Version Info"
           actions={
+            // TODO: Check if version is hosted, and merge pwa update button here
             appState.updateAvaliable && (
               <a href={`http://${connectionUrl}/admin/spiffs`}>
                 <IconButton tooltip="Update now" icon={<MdUpgrade />} />

src/index.css

@@ -34,6 +34,7 @@
   padding: 0 !important;
 }
 
+/* JSONPretty */
 .__json-pretty__ {
   line-height: 1.3;
   color: #748096;
@@ -56,3 +57,22 @@
   color: #748096;
   overflow: auto;
 }
+
+/* Mobile height fix */
+/* .min-h-fill {
+  min-height: -webkit-fill-available;
+}
+
+.h-fill {
+  height: -webkit-fill-available;
+} */
+
+body {
+  min-height: 100vh;
+  /* mobile viewport bug fix */
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}