@ -4,7 +4,7 @@
<!-- Messages in the upper - right - https : / / g i t h u b . c o m / e m m a n u e l s w / n o t i w i n d - - > <!-- Messages in the upper - right - https : / / g i t h u b . c o m / e m m a n u e l s w / n o t i w i n d - - >
< NotificationGroup group = "alert" > < NotificationGroup group = "alert" >
< div < div
class = "fixed top-4 right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end" class = "fixed top-[calc(env(safe-area-inset-top)+1rem)] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
> >
< Notification < Notification
v - slot = "{ notifications, close }" v - slot = "{ notifications, close }"
@ -147,7 +147,7 @@
"-permission" , "-mute" , "-off" "-permission" , "-mute" , "-off"
-- > -- >
< NotificationGroup group = "modal" > < NotificationGroup group = "modal" >
< div class = "fixed z-[100] top-0 inset-x-0 w-full" > < div class = "fixed z-[100] top-[env(safe-area-inset-top)] inset-x-0 w-full" >
< Notification < Notification
v - slot = "{ notifications, close }" v - slot = "{ notifications, close }"
enter = "transform ease-out duration-300 transition" enter = "transform ease-out duration-300 transition"
@ -539,4 +539,15 @@ export default class App extends Vue {
} }
< / script > < / script >
< style > < / style > < style >
# Content {
padding - left : 1.5 rem ;
padding - right : 1.5 rem ;
padding - top : calc ( env ( safe - area - inset - top ) + 1.5 rem ) ;
padding - bottom : calc ( env ( safe - area - inset - bottom ) + 1.5 rem ) ;
}
# QuickNav ~ # Content {
padding - bottom : calc ( env ( safe - area - inset - bottom ) + 6 rem ) ;
}
< / style >
Jose Olarte III
4 weeks ago