hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): add safe-area-inset-top for iPhone notch/dynamic island

Browse Source 
Content was rendering behind the iPhone notch/dynamic island because
no top safe area inset was applied. Added pt-[env(safe-area-inset-top)]
to both the root Layout container and the mobile sidebar overlay.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-23 17:17:31 -06:00
parent 25ad04eb10
commit dd0057baad
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -101,7 +101,7 @@ export function Layout() {
); );
return ( return (
<div className="flex h-screen bg-background text-foreground overflow-hidden"> <div className="flex h-screen bg-background text-foreground overflow-hidden pt-[env(safe-area-inset-top)]">
{/* Mobile backdrop */} {/* Mobile backdrop */}
{isMobile && sidebarOpen && ( {isMobile && sidebarOpen && (
<div <div
@@ -114,7 +114,7 @@ export function Layout() {
{isMobile ? ( {isMobile ? (
<div <div
className={cn( className={cn(
"fixed inset-y-0 left-0 z-50 flex transition-transform duration-200 ease-in-out", "fixed inset-y-0 left-0 z-50 flex pt-[env(safe-area-inset-top)] transition-transform duration-200 ease-in-out",
sidebarOpen ? "translate-x-0" : "-translate-x-full" sidebarOpen ? "translate-x-0" : "-translate-x-full"
)} )}
> >