mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-13 21:52:40 +00:00
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:
committed by
Elisiário Couto
parent
571072f6ac
commit
6589c2dd66
@@ -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
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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))",
|
||||
|
||||
Reference in New Issue
Block a user