From 31c51f19394ddb2cce7b5f33053dfb3056f86fcf Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 21 Apr 2025 15:15:03 -0700
Subject: [PATCH] fix: fixes top padding for drawer in PWA mode (#3829)

---
 assets/components/common/MobileMenu.vue | 6 +-----
 assets/components/common/SideDrawer.vue | 2 +-
 assets/main.css                         | 4 ++++
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/components/common/MobileMenu.vue b/assets/components/common/MobileMenu.vue
index 181fdd25..b7f307ae 100644
--- a/assets/components/common/MobileMenu.vue
+++ b/assets/components/common/MobileMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="border-base-content/20 bg-base-200 fixed top-0 z-10 w-full border-b" data-testid="navigation">
+  <nav class="border-base-content/20 bg-base-200 pt-safe fixed top-0 z-10 w-full border-b" data-testid="navigation">
     <div class="p-2">
       <div class="flex items-center">
         <router-link :to="{ name: '/' }">
@@ -57,8 +57,4 @@ watch(route, () => {
 .fade-leave-to > div {
   @apply -translate-y-10;
 }
-
-nav {
-  padding-top: env(safe-area-inset-top);
-}
 </style>
diff --git a/assets/components/common/SideDrawer.vue b/assets/components/common/SideDrawer.vue
index c2a2f1fa..c4167fee 100644
--- a/assets/components/common/SideDrawer.vue
+++ b/assets/components/common/SideDrawer.vue
@@ -1,6 +1,6 @@
 <template>
   <dialog ref="panel" class="modal-right modal items-start outline-hidden backdrop:bg-none">
-    <div class="modal-box" :width="width">
+    <div class="modal-box pt-safe" :width="width">
       <form method="dialog">
         <button class="swap hover:swap-active absolute top-4 right-4 outline-hidden">
           <mdi:keyboard-esc class="swap-off" />
diff --git a/assets/main.css b/assets/main.css
index 914f9cc3..cd5b60d1 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -11,6 +11,10 @@
   --color-orange: oklch(70% 0.186 48.13);
 }
 
+@utility pt-safe {
+  padding-top: env(safe-area-inset-top);
+}
+
 @plugin "daisyui/theme" {
   name: "dark";
   default: false;