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