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 -->
This commit is contained in:
Cats Juice
2025-07-17 17:23:04 +08:00
committed by GitHub
parent c90d511251
commit 4018b3aeca

View File

@@ -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')})`,
},
},
});