fix(ui): add safe-area-inset-top for iPhone notch/dynamic island
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:
@@ -101,7 +101,7 @@ export function Layout() {
|
||||
);
|
||||
|
||||
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 */}
|
||||
{isMobile && sidebarOpen && (
|
||||
<div
|
||||
@@ -114,7 +114,7 @@ export function Layout() {
|
||||
{isMobile ? (
|
||||
<div
|
||||
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"
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user