ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-06 09:15:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing safe zone paddings (attempt 2)

Browse Source
This commit is contained in:
corgifist 2025-07-25 20:21:08 +03:00
parent 6691d4b23f
commit 5a7c627cd6
3 changed files with 74 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/page.tsx
View File

@ -251,12 +251,13 @@ export default function Home(): ReactNode {
return ( return (
<div className="p-5 w-full h-full"> <div className="p-5 w-full h-full">
<div className="pt-safe">
<div className="flex flex-row items-center gap-2 overscroll-none"> <div className="flex flex-row items-center gap-2 overscroll-none">
<SidebarTrigger size="lg" /> <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> <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>} {projects && <Label className="text-muted-foreground text-sm">(Found {projects.length} projects)</Label>}
</div> </div>
<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 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"> <div className="flex flex-row items-center gap-2">
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
@ -296,6 +297,7 @@ export default function Home(): ReactNode {
<Search placeholder="Search Projects" value={search} onChange={(e) => setSearch(e.target.value)} /> <Search placeholder="Search Projects" value={search} onChange={(e) => setSearch(e.target.value)} />
</div> </div>
</div> </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"> <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">
{projects && projects.map((project) => <ProjectContainer key={project.uuid} project={project} />)} {projects && projects.map((project) => <ProjectContainer key={project.uuid} project={project} />)}
</div> </div>

2
src/components/dashboard/Dashboard.tsx
View File

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

4
src/components/ui/sidebar.tsx
View File

@ -187,7 +187,7 @@ function Sidebar({
data-sidebar="sidebar" data-sidebar="sidebar"
data-slot="sidebar" data-slot="sidebar"
data-mobile="true" data-mobile="true"
className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden" className={cn("bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", className)}
style={ style={
{ {
"--sidebar-width": SIDEBAR_WIDTH_MOBILE, "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@ -199,7 +199,7 @@ function Sidebar({
<SheetTitle>Sidebar</SheetTitle> <SheetTitle>Sidebar</SheetTitle>
<SheetDescription>Displays the mobile sidebar.</SheetDescription> <SheetDescription>Displays the mobile sidebar.</SheetDescription>
</SheetHeader> </SheetHeader>
<div className={cn("flex h-full w-full flex-col", className)}>{children}</div> <div className="flex h-full w-full flex-col">{children}</div>
</SheetContent> </SheetContent>
</Sheet> </Sheet>
) )