Improve iOS UX (#207)

* Disable zoom on mobile

* Fix iOS homebar overlapping

* chore: Auto-fix lint errors

* Trigger CI

Author: mauriciabad

package.json

@@ -97,6 +97,7 @@
     "prettier-plugin-tailwindcss": "0.5.11",
     "server-only": "0.0.1",
     "tailwind-merge": "2.2.1",
+    "tailwindcss-safe-area": "0.5.1",
     "ts-jest": "29.1.2",
     "ts-toolbelt": "9.6.0",
     "webpack": "5.90.1"

pnpm-lock.yaml

@@ -25,6 +25,8 @@ const poppins = Poppins({
 
 export const viewport: Viewport = {
   themeColor: '#5F797A',
+  maximumScale: 1,
+  userScalable: false,
 }
 
 export async function generateMetadata({
@@ -68,7 +70,7 @@ const RootLayout: FC<RootLayoutProps> = async ({
           inter.className,
           poppins.variable,
           inter.variable,
-          'bg-stone-50',
+          'bg-stone-50 p-safe',
         ])}
       >
         <AxiomWebVitals />

src/app/[locale]/layout.tsx

@@ -32,7 +32,7 @@ const BottomNavbarInner: FC<{
   return (
     <nav
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 h-14 border-t border-stone-200 bg-white shadow-xl',
+        'fixed inset-x-0 bottom-0 z-50 box-content h-14 border-t border-stone-200 bg-white shadow-xl pb-safe',
         className
       )}
     >

src/components/navbar/bottom-navbar.tsx

@@ -3,6 +3,7 @@
 import { nextui } from '@nextui-org/react'
 import typography from '@tailwindcss/typography'
 import tailwindScrollbarHide from 'tailwind-scrollbar-hide'
+import tailwindcssSafeArea from 'tailwindcss-safe-area'
 import defaultTheme from 'tailwindcss/defaultTheme'
 import plugin from 'tailwindcss/plugin'
 import { allColorClasses } from './src/helpers/color-classes'
@@ -79,6 +80,7 @@ const config = {
     nextui(),
     typography,
     tailwindScrollbarHide,
+    tailwindcssSafeArea,
     plugin(function ({ matchUtilities, theme }) {
       matchUtilities(
         {