fix(frontend): Add iOS safe area support for PWA sticky header

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2025-09-18 22:26:03 +00:00
committed by Elisiário Couto
parent 571072f6ac
commit 6589c2dd66
3 changed files with 13 additions and 1 deletions

View File

@@ -33,7 +33,7 @@ export default function Header({ setSidebarOpen }: HeaderProps) {
});
return (
<header className="lg:static sticky top-0 z-50 bg-card shadow-sm border-b border-border">
<header className="lg:static sticky top-0 z-50 bg-card shadow-sm border-b border-border pt-safe-top">
<div className="flex items-center justify-between h-16 px-6">
<div className="flex items-center">
<button

View File

@@ -29,6 +29,12 @@
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
/* iOS Safe Area Support for PWA */
--safe-area-inset-top: env(safe-area-inset-top, 0px);
--safe-area-inset-right: env(safe-area-inset-right, 0px);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-inset-left: env(safe-area-inset-left, 0px);
}
.dark {
--background: 222.2 84% 4.9%;

View File

@@ -9,6 +9,12 @@ export default {
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
spacing: {
'safe-top': 'var(--safe-area-inset-top)',
'safe-bottom': 'var(--safe-area-inset-bottom)',
'safe-left': 'var(--safe-area-inset-left)',
'safe-right': 'var(--safe-area-inset-right)',
},
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",