Update navigation mobile

Author: carlagn

apps/site/src/app/layout.tsx

@@ -3,7 +3,7 @@ import { createSiteStructuredData } from "@/lib/structured-data";
 import { getBaseUrl } from "@/lib/url";
 import "./global.css";
 import { Inter } from "next/font/google";
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import Script from "next/script";
 import type React from "react";
 import { SITE_HOME_DESCRIPTION, SITE_HOME_TITLE } from "@/lib/site-metadata";
@@ -22,6 +22,12 @@ const inter = Inter({
   variable: "--font-inter",
 });
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = {
   metadataBase: new URL(getBaseUrl()),
   title: SITE_HOME_TITLE,

packages/ui/src/components/navigation-menu.tsx

@@ -461,7 +461,7 @@ function NavigationMobileMenu({
   buttonVariant?: "ppg" | "orm";
 }) {
   return (
-    <div className="fixed px-0 md:hidden w-screen h-screen pt-22 top-0 left-0 -z-1 bg-background-default flex flex-col justify-between">
+    <div className="fixed px-0 md:hidden w-screen h-dvh pt-22 top-0 left-0 -z-1 bg-background-default flex flex-col justify-between">
       <div className="list pb-[130px] overflow-scroll">
         {links.map((link) =>
           link.url ? (
@@ -482,7 +482,7 @@ function NavigationMobileMenu({
           ) : null,
         )}
       </div>
-      <div className="h-min-content mx-auto w-full absolute bottom-0 left-0 py-6 px-4 bg-background-default justify-center items-center gap-6 flex flex-col">
+      <div className="h-min-content mx-auto w-full absolute bottom-0 left-0 pt-6 pb-[calc(1.5rem+env(safe-area-inset-bottom))] px-4 bg-background-default justify-center items-center gap-6 flex flex-col">
         <Socials className="flex items-center justify-center" include="all" />
         <div className="grid gap-2 grid-cols-2 w-full">
           <NavigationMenuItem className="w-full">