From 6c59791682f83e743f83f5b80f086edecb3325a5 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 30 Dec 2022 17:25:40 +0100
Subject: [PATCH] fix(safari): account for larger header in
 notifications/explore

---
 components/main/MainContent.vue | 3 ++-
 pages/[[server]]/explore.vue    | 2 +-
 pages/notifications.vue         | 2 +-
 unocss.config.ts                | 1 +
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index eec056c6..d1f095fd 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -4,11 +4,12 @@ defineProps<{
   backOnSmallScreen?: boolean
   /** Show the back button on both small and big screens */
   back?: boolean
+  largeHeader?: boolean
 }>()
 </script>
 
 <template>
-  <div relative mobile-padding-top sm:pt-0>
+  <div relative :class="largeHeader ? 'mobile-padding-top-large-header' : 'mobile-padding-top'" sm:pt-0>
     <div
       fixed sm:sticky w-full top-0 z10
       border="b base" bg-base
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index 894a4304..4ad9860a 100644
--- a/pages/[[server]]/explore.vue
+++ b/pages/[[server]]/explore.vue
@@ -26,7 +26,7 @@ const tabs = $computed(() => [
 </script>
 
 <template>
-  <MainContent>
+  <MainContent large-header>
     <template #title>
       <span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop">
         <div i-ri:hashtag />
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 9fe97e19..137164fa 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -26,7 +26,7 @@ onActivated(() => {
 </script>
 
 <template>
-  <MainContent>
+  <MainContent large-header>
     <template #title>
       <NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:notification-4-line />
diff --git a/unocss.config.ts b/unocss.config.ts
index 533f2ed3..cba22be0 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -102,6 +102,7 @@ export default defineConfig({
     }],
     ['box-shadow-outline', { 'box-shadow': '0 0 0 1px var(--c-primary)' }],
     ['mobile-padding-top', { 'padding-top': 'calc(4rem + 1px)' }], // in sm screen size header is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari
+    ['mobile-padding-top-large-header', { 'padding-top': 'calc(6.5rem + 1px)' }],
     ['mobile-padding-bottom', { 'padding-bottom': '3.5rem' }], // in sm screen size footer is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari
   ],
 })