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 ], })