From 4018b3aecadb8fed534945405f6f6968ca33161c Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 17 Jul 2025 17:23:04 +0800
Subject: [PATCH] fix(component): mobile menu bottom padding not work (#13249)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved safe area styling by ensuring a default padding is applied
when certain variables are not set, resulting in more consistent layout
spacing across different scenarios.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/frontend/component/src/ui/safe-area/style.css.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/component/src/ui/safe-area/style.css.ts b/packages/frontend/component/src/ui/safe-area/style.css.ts
index af217c0f4..042ececea 100644
--- a/packages/frontend/component/src/ui/safe-area/style.css.ts
+++ b/packages/frontend/component/src/ui/safe-area/style.css.ts
@@ -1,4 +1,4 @@
-import { createVar, style } from '@vanilla-extract/css';
+import { createVar, fallbackVar, style } from '@vanilla-extract/css';
 
 export const topOffsetVar = createVar();
 export const bottomOffsetVar = createVar();
@@ -9,14 +9,13 @@ export const safeArea = style({
       paddingTop: `calc(${topOffsetVar} + 12px)`,
     },
     '&[data-bottom]': {
-      paddingBottom: `calc(${bottomOffsetVar} + 0px)`,
+      paddingBottom: `calc(${fallbackVar(bottomOffsetVar, '0px')} + 0px)`,
     },
     '&[data-standalone][data-top]': {
       paddingTop: `calc(env(safe-area-inset-top, 12px) + ${topOffsetVar})`,
     },
     '&[data-standalone][data-bottom]': {
-      // paddingBottom: 'env(safe-area-inset-bottom, 12px)',
-      paddingBottom: `calc(env(safe-area-inset-bottom, 0px) + ${bottomOffsetVar})`,
+      paddingBottom: `calc(env(safe-area-inset-bottom, 0px) + ${fallbackVar(bottomOffsetVar, '0px')})`,
     },
   },
 });