From b6a7a62af660dd9b246c1cd9e1a6e556627dbbbc Mon Sep 17 00:00:00 2001
From: corgifist <sxuare.science@gmail.com>
Date: Fri, 25 Jul 2025 20:24:58 +0300
Subject: [PATCH] fixing safe zone paddings (attempt 3)

---
 src/app/page.tsx     | 86 ++++++++++++++++++++++----------------------
 src/app/pwa-head.tsx |  2 +-
 2 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 505daf0..170f7bb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -251,51 +251,49 @@ export default function Home(): ReactNode {
 
     return (
         <div className="p-5 w-full h-full">
-            <div className="pt-safe">
-                <div className="flex flex-row items-center gap-2 overscroll-none">
-                    <SidebarTrigger size="lg" />
-                    <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 className="flex flex-row items-center gap-2 overscroll-none">
+                <SidebarTrigger size="lg" />
+                <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-safe bg-background gap-2 mt-3 pb-2 pt-2 w-full overscroll-none z-50">
+                <div className="flex flex-row items-center gap-2">
+                    <Dialog>
+                        <DialogTrigger asChild>
+                            <Button>
+                                <PlusIcon /> {!isMobile && "New Project"}
+                            </Button>
+                        </DialogTrigger>
+                        <DialogContent>
+                            <DialogHeader>
+                                <DialogTitle>
+                                    Create New Project
+                                </DialogTitle>
+                                <DialogDescription>
+                                    Fill in the information about your project. You can change it at any time later.
+                                </DialogDescription>
+                            </DialogHeader>
+                            <Form {...newProjectForm}>
+                                <form onSubmit={newProjectForm.handleSubmit(newProjectSubmit)} className="grid gap-3">
+                                    <ProjectInfoForm form={newProjectForm} />
+                                    <DialogFooter>
+                                        <DialogClose asChild>
+                                            <Button variant="outline">Cancel</Button>
+                                        </DialogClose>
+                                        <DialogClose asChild>
+                                            <Button type="submit">Create</Button>
+                                        </DialogClose>
+                                    </DialogFooter>
+                                </form>
+                            </Form>
+                        </DialogContent>
+                    </Dialog>
                 </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 gap-2">
-                        <Dialog>
-                            <DialogTrigger asChild>
-                                <Button>
-                                    <PlusIcon /> {!isMobile && "New Project"}
-                                </Button>
-                            </DialogTrigger>
-                            <DialogContent>
-                                <DialogHeader>
-                                    <DialogTitle>
-                                        Create New Project
-                                    </DialogTitle>
-                                    <DialogDescription>
-                                        Fill in the information about your project. You can change it at any time later.
-                                    </DialogDescription>
-                                </DialogHeader>
-                                <Form {...newProjectForm}>
-                                    <form onSubmit={newProjectForm.handleSubmit(newProjectSubmit)} className="grid gap-3">
-                                        <ProjectInfoForm form={newProjectForm} />
-                                        <DialogFooter>
-                                            <DialogClose asChild>
-                                                <Button variant="outline">Cancel</Button>
-                                            </DialogClose>
-                                            <DialogClose asChild>
-                                                <Button type="submit">Create</Button>
-                                            </DialogClose>
-                                        </DialogFooter>
-                                    </form>
-                                </Form>
-                            </DialogContent>
-                        </Dialog>
-                    </div>
-                    <div className="flex flex-row items-center gap-2">
-                        <Toggle variant="outline">
-                            <ListCheckIcon /> {!isMobile && "Select Projects"}
-                        </Toggle>
-                        <Search placeholder="Search Projects" value={search} onChange={(e) => setSearch(e.target.value)} />
-                    </div>
+                <div className="flex flex-row items-center gap-2">
+                    <Toggle variant="outline">
+                        <ListCheckIcon /> {!isMobile && "Select Projects"}
+                    </Toggle>
+                    <Search placeholder="Search Projects" value={search} onChange={(e) => setSearch(e.target.value)} />
                 </div>
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-5">
diff --git a/src/app/pwa-head.tsx b/src/app/pwa-head.tsx
index 55270f5..73e7a70 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="black-translucent" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
         <meta name="apple-touch-fullscreen" content="yes" />
         <meta name="mobile-web-app-capable" content="yes" />
         <meta name="theme-color" content="var(--background)" />