From 737eb2aea214efab37adda0f537bd4cf5d7787e4 Mon Sep 17 00:00:00 2001
From: msksbr515 <gugugulaocuchen@gmail.com>
Date: Sun, 24 May 2026 22:41:15 +0800
Subject: [PATCH] fix(css): fill mobile safe-area zones with background color

Use fixed ::before and ::after pseudo-elements to render the
background color in safe-area inset zones, preventing transparent
gaps on notched mobile devices while maintaining body padding for
content flow.
---
 src/index.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/index.css b/src/index.css
index 23df6d7..b3fd82a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -134,6 +134,26 @@ html.mobile {
   --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
 
+html.mobile body::before,
+html.mobile body::after {
+  content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background: var(--background);
+}
+
+html.mobile body::before {
+  top: 0;
+  height: var(--safe-top);
+}
+
+html.mobile body::after {
+  bottom: 0;
+  height: var(--safe-bottom);
+}
+
 html.mobile body {
   padding-top: var(--safe-top);
   padding-bottom: var(--safe-bottom);