adding safe zone paddings throughout the ui

src/app/globals.css

@@ -49,6 +49,7 @@ html {
 }
 
 body {
+    -webkit-tap-highlight-color: transparent;
     font-family: var(--font-geist), sans-serif;
     background-color: var(--background);
 }

src/app/layout.tsx

@@ -28,6 +28,8 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
     width: 'device-width',
     initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
     viewportFit: 'cover'
 };
 

src/app/manifest.json

@@ -1,6 +1,7 @@
 {
     "name": "ClipFusion Video Editor",
     "short_name": "ClipFusion",
+    "start_url": "/",
     "icons": [
         {
             "src": "/web-app-manifest-192x192.png",

src/app/page.tsx

@@ -256,7 +256,7 @@ export default function Home(): ReactNode {
                 <h2 className="font-bold break-keep text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-none">Project Library</h2>
                 {projects && <Label className="text-muted-foreground text-sm">(Found {projects.length} projects)</Label>}
             </div>
-            <div className="flex flex-row items-center justify-between sticky top-0 bg-background gap-2 mt-3 pb-2 pt-2 w-full overscroll-none z-50">
+            <div className="flex flex-row items-center justify-between sticky top-0 bg-background gap-2 mt-3 pb-2 pt-safe-or-2 w-full overscroll-none z-50">
                 <div className="flex flex-row items-center gap-2">
                     <Dialog>
                         <DialogTrigger asChild>

src/app/pwa-head.tsx

@@ -2,7 +2,7 @@ const PWAHead = () => (
     <>
         <meta name="apple-mobile-web-app-title" content="ClipFusion" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="apple-touch-fullscreen" content="yes" />
         <meta name="mobile-web-app-capable" content="yes" />
         <meta name="theme-color" content="var(--background)" />

src/components/dashboard/Dashboard.tsx

@@ -32,7 +32,7 @@ const items: DashboardItem[] = [
 
 export const Dashboard = (): ReactNode => {
     return (
-        <Sidebar className="pl-safe">
+        <Sidebar className="ml-safe">
             <SidebarHeader className="flex justify-center items-center mt-safe-or-2">
                 <Link href="/">
                     <ClipFusionLogo width="30" height="30">

src/components/ui/sidebar.tsx

@@ -199,7 +199,7 @@ function Sidebar({
             <SheetTitle>Sidebar</SheetTitle>
             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
           </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
+          <div className={cn("flex h-full w-full flex-col", className)}>{children}</div>
         </SheetContent>
       </Sheet>
     )