From 6691d4b23f43211f22ccd8950b62f6935935f558 Mon Sep 17 00:00:00 2001
From: corgifist <sxuare.science@gmail.com>
Date: Fri, 25 Jul 2025 20:16:52 +0300
Subject: [PATCH] adding safe zone paddings throughout the ui

---
 src/app/globals.css                    | 1 +
 src/app/layout.tsx                     | 2 ++
 src/app/manifest.json                  | 1 +
 src/app/page.tsx                       | 2 +-
 src/app/pwa-head.tsx                   | 2 +-
 src/components/dashboard/Dashboard.tsx | 2 +-
 src/components/ui/sidebar.tsx          | 2 +-
 7 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 9753c71..515be44 100644
--- a/src/app/globals.css
+++ b/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);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4ffc162..f2baf34 100644
--- a/src/app/layout.tsx
+++ b/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'
 };
 
diff --git a/src/app/manifest.json b/src/app/manifest.json
index 5e1d9e4..f3416f1 100644
--- a/src/app/manifest.json
+++ b/src/app/manifest.json
@@ -1,6 +1,7 @@
 {
     "name": "ClipFusion Video Editor",
     "short_name": "ClipFusion",
+    "start_url": "/",
     "icons": [
         {
             "src": "/web-app-manifest-192x192.png",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1bae159..705e7d3 100644
--- a/src/app/page.tsx
+++ b/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>
diff --git a/src/app/pwa-head.tsx b/src/app/pwa-head.tsx
index 73e7a70..55270f5 100644
--- a/src/app/pwa-head.tsx
+++ b/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)" />
diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx
index 446adc6..ea5369a 100644
--- a/src/components/dashboard/Dashboard.tsx
+++ b/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">
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 9024b66..b84adf5 100644
--- a/src/components/ui/sidebar.tsx
+++ b/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>
     )