From ea1588d9e917742c98300c955fd716bed30e20f8 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 5 Aug 2025 09:38:48 +0800
Subject: [PATCH] fix: support iOS safe area for header
---
frontend/public/index.html | 2 +-
frontend/src/assets/global.css | 4 +++-
frontend/src/components/HeaderComponent.vue | 2 ++
3 files changed, 6 insertions(+), 2 deletions(-)
diff --git a/frontend/public/index.html b/frontend/public/index.html
index dfdea33bc..038d03c36 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,7 +6,7 @@
-
+
OpenIsle - 全面开源的自由技术社区
diff --git a/frontend/src/assets/global.css b/frontend/src/assets/global.css
index 5f0786489..b40f04607 100644
--- a/frontend/src/assets/global.css
+++ b/frontend/src/assets/global.css
@@ -2,7 +2,9 @@
--primary-color-hover: rgb(9, 95, 105);
--primary-color: rgb(10, 110, 120);
--primary-color-disabled: rgba(93, 152, 156, 0.5);
- --header-height: 60px;
+ --safe-area-inset-top: constant(safe-area-inset-top);
+ --safe-area-inset-top: env(safe-area-inset-top);
+ --header-height: calc(60px + var(--safe-area-inset-top));
--header-background-color: white;
--header-border-color: lightgray;
--header-text-color: black;
diff --git a/frontend/src/components/HeaderComponent.vue b/frontend/src/components/HeaderComponent.vue
index cf6813fec..8bac9a049 100644
--- a/frontend/src/components/HeaderComponent.vue
+++ b/frontend/src/components/HeaderComponent.vue
@@ -173,6 +173,8 @@ export default {
justify-content: space-between;
align-items: center;
height: var(--header-height);
+ padding-top: var(--safe-area-inset-top);
+ box-sizing: border-box;
background-color: var(--background-color-blur);
backdrop-filter: blur(10px);
color: var(--header-text-color);