Add top and bottom margin for mobile

Author: MartinBraquet

android/app/src/main/AndroidManifest.xml

@@ -8,6 +8,7 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:usesCleartextTraffic="true"
+        android:fitsSystemWindows="true"
         android:theme="@style/AppTheme">
 
         <activity

web/components/nav/bottom-nav-bar.tsx

@@ -39,7 +39,11 @@ export function BottomNavBar(props: {
 
   return (
     <nav
-      className="border-ink-200 dark:border-ink-300 text-ink-700 bg-canvas-50 fixed inset-x-0 bottom-0 z-50 flex select-none items-center justify-between border-t-2 text-xs lg:hidden sidebar-nav">
+      className={clsx(
+        "border-ink-200 dark:border-ink-300 text-ink-700 bg-canvas-50 fixed inset-x-0 bottom-0 z-50 flex select-none items-center justify-between border-t-2 text-xs lg:hidden sidebar-nav",
+        'safe-bottom',
+      )}
+    >
       {navigationOptions.map((item) => (
         <NavBarItem
           key={item.name}

web/components/page-base.tsx

@@ -24,9 +24,9 @@ import Sidebar from './nav/sidebar'
 import {useProfile} from 'web/hooks/use-profile'
 import {Profile} from 'common/profiles/profile'
 import {NotificationsIcon, SolidNotificationsIcon} from './notifications-icon'
-import {IS_MAINTENANCE} from "common/constants";
-import {MdThumbUp} from "react-icons/md";
-import {FaEnvelope} from "react-icons/fa";
+import {IS_MAINTENANCE} from "common/constants"
+import {MdThumbUp} from "react-icons/md"
+import {FaEnvelope} from "react-icons/fa"
 
 export function PageBase(props: {
   trackPageView: string | false
@@ -106,20 +106,20 @@ export function PageBase(props: {
   )
 }
 
-const Profiles = {name: 'Profiles', href: '/', icon: SolidHomeIcon};
-const ProfilesHome = {name: 'Profiles', href: '/', icon: HomeIcon};
-const faq = {name: 'FAQ', href: '/faq', icon: SolidQuestionIcon};
-const About = {name: 'About', href: '/about', icon: QuestionMarkCircleIcon};
-const Signin = {name: 'Sign in', href: '/signin', icon: UserCircleIcon};
-const Notifs = {name: 'Notifs', href: `/notifications`, icon: NotificationsIcon};
-const NotifsSolid = {name: 'Notifs', href: `/notifications`, icon: SolidNotificationsIcon};
-const Messages = {name: 'Messages', href: '/messages', icon: PrivateMessagesIcon};
-const Social = {name: 'Social', href: '/social', icon: LinkIcon};
-const Organization = {name: 'Organization', href: '/organization', icon: GlobeAltIcon};
-const Vote = {name: 'Vote', href: '/vote', icon: MdThumbUp};
-const Contact = {name: 'Contact', href: '/contact', icon: FaEnvelope};
-const News = {name: "What's new", href: '/news', icon: NewspaperIcon};
-const Settings = {name: "Settings", href: '/settings', icon: CogIcon};
+const Profiles = {name: 'Profiles', href: '/', icon: SolidHomeIcon}
+const ProfilesHome = {name: 'Profiles', href: '/', icon: HomeIcon}
+const faq = {name: 'FAQ', href: '/faq', icon: SolidQuestionIcon}
+const About = {name: 'About', href: '/about', icon: QuestionMarkCircleIcon}
+const Signin = {name: 'Sign in', href: '/signin', icon: UserCircleIcon}
+const Notifs = {name: 'Notifs', href: `/notifications`, icon: NotificationsIcon}
+const NotifsSolid = {name: 'Notifs', href: `/notifications`, icon: SolidNotificationsIcon}
+const Messages = {name: 'Messages', href: '/messages', icon: PrivateMessagesIcon}
+const Social = {name: 'Social', href: '/social', icon: LinkIcon}
+const Organization = {name: 'Organization', href: '/organization', icon: GlobeAltIcon}
+const Vote = {name: 'Vote', href: '/vote', icon: MdThumbUp}
+const Contact = {name: 'Contact', href: '/contact', icon: FaEnvelope}
+const News = {name: "What's new", href: '/news', icon: NewspaperIcon}
+const Settings = {name: "Settings", href: '/settings', icon: CogIcon}
 
 const base = [
   About,

web/lib/firebase/users.ts

@@ -7,6 +7,7 @@ import {safeLocalStorage} from '../util/local'
 import {app} from './init'
 import {GOOGLE_CLIENT_ID} from "common/constants";
 import {REDIRECT_URI} from "common/envs/constants";
+import {isAndroidWebView} from "web/lib/util/webview";
 
 dayjs.extend(utc)
 
@@ -45,15 +46,6 @@ export function writeReferralInfo(
   }
 }
 
-export function isAndroidWebView() {
-  try {
-    // Detect if Android bridge exists
-    return typeof (window as any).AndroidBridge?.isNativeApp === 'function';
-  } catch {
-    return false;
-  }
-}
-
 async function generatePKCE() {
   const array = new Uint8Array(32);
   crypto.getRandomValues(array);

web/lib/util/webview.ts

@@ -0,0 +1,8 @@
+export function isAndroidWebView() {
+  try {
+    // Detect if Android bridge exists
+    return typeof (window as any).AndroidBridge?.isNativeApp === 'function';
+  } catch {
+    return false;
+  }
+}

web/pages/_app.tsx

@@ -15,6 +15,8 @@ import AndroidPush from "web/lib/service/android-push";
 import {unauthedApi} from "common/util/api";
 import {GoogleAuthProvider, signInWithCredential} from "firebase/auth";
 import {auth} from "web/lib/firebase/users";
+import {isAndroidWebView} from "web/lib/util/webview";
+
 
 // See https://nextjs.org/docs/basic-features/font-optimization#google-fonts
 // and if you add a font, you must add it to tailwind config as well for it to work.
@@ -52,6 +54,7 @@ function printBuildInfo() {
 type PageProps = { auth?: AuthUser }
 
 function MyApp({Component, pageProps}: AppProps<PageProps>) {
+  console.log('isAndroidWebView app:', isAndroidWebView())
   useEffect(printBuildInfo, [])
   useHasLoaded()
 
@@ -147,7 +150,7 @@ function MyApp({Component, pageProps}: AppProps<PageProps>) {
         />
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"
+          content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no, viewport-fit=cover"
         />
       </Head>
       <PostHogProvider client={posthog}>

web/pages/_document.tsx

@@ -1,6 +1,7 @@
 import {Head, Html, Main, NextScript} from 'next/document'
 import {ENV_CONFIG, IS_DEPLOYED} from 'common/envs/constants'
 import Script from 'next/script'
+import clsx from "clsx";
 
 export default function Document() {
   return (
@@ -40,7 +41,10 @@ export default function Document() {
           } catch(e){} })();`
         }}/>}
       </Head>
-      <body className="body-bg text-ink-1000">
+      <body className={clsx(
+        "body-bg text-ink-1000",
+        'app-content',
+      )}>
       <Main/>
       <NextScript/>
       </body>

web/styles/globals.css

@@ -448,4 +448,16 @@ ol > li::marker {
     font-weight: 600;
     font-size: 1em;
     color: #374151;               /* pick a visible color */
-}
+}
+
+.app-content {
+    padding-top: calc(env(safe-area-inset-top) + 30px);
+    /*padding-bottom: env(safe-area-inset-bottom);*/
+    box-sizing: border-box; /* ensure padding doesn’t break layout */
+}
+
+.safe-bottom {
+    /*bottom: env(safe-area-inset-bottom);*/
+    bottom: calc(env(safe-area-inset-bottom) + 30px);
+}
+