Customize bottom safe area on Android like the top safe area.

GitOrigin-RevId: 6cd48c4cf989bdb1ac09dc475f7a466207dafa4e
nkzw-tech · Feb 28, 2025 · 9172fbb · 9172fbb
1 parent 9f31d2e
commit 9172fbb
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 17 deletions.
diff --git a/hera/editor/MapEditor.tsx b/hera/editor/MapEditor.tsx
@@ -1224,7 +1224,7 @@ const lightColorStyle = css`
 `;
 
 const togglePlaytestButtonStyle = css`
-  bottom: calc(env(safe-area-inset-bottom, 0) + ${applyVar('inset')});
+  bottom: calc(${applyVar('safe-area-bottom')} + ${applyVar('inset')});
   color: transparent;
   left: ${applyVar('inset')};
   overflow: hidden;

diff --git a/hera/ui/CharacterMessage.tsx b/hera/ui/CharacterMessage.tsx
@@ -311,18 +311,17 @@ export default function CharacterMessage(props: Props) {
 
 const vars = new CSSVariables<'multiplier' | 'color' | 'color-light'>('ui-m');
 
-// Keep zIndex in sync with SkipMessages and Menu.
+// Keep zIndex in sync with `SkipMessages` and `Menu`.
 const containerStyle = css`
   align-items: start;
+  bottom: ${applyVar('safe-area-bottom')};
   display: flex;
   image-rendering: pixelated;
+  inset: 0;
   pointer-events: none;
   position: fixed;
-  z-index: 3001;
-  inset: 0;
-
   top: ${applyVar('safe-area-top')};
-  bottom: env(safe-area-inset-bottom);
+  z-index: 3001;
 `;
 
 const bottomStyle = css`

diff --git a/hera/ui/GameActions.tsx b/hera/ui/GameActions.tsx
@@ -758,12 +758,12 @@ const actionButtonStyle = css`
   z-index: calc(${applyVar('inset-z')} + 2);
 
   bottom: calc(
-    env(safe-area-inset-bottom, 0) +
+    ${applyVar('safe-area-bottom')} +
       (${vars.apply('bottom-offset')} * ${size - 6}px) + ${applyVar('inset')}
   );
   ${Breakpoints.height.xs} {
     bottom: calc(
-      env(safe-area-inset-bottom, 0) +
+      ${applyVar('safe-area-bottom')} +
         (${vars.apply('bottom-offset')} * ${size - 4}px) + ${applyVar('inset')}
     );
   }

diff --git a/hera/ui/MapInfo.tsx b/hera/ui/MapInfo.tsx
@@ -345,7 +345,7 @@ const inlineStyle = css`
 
 const style = css`
   ${vars.set('left-offset', '0px')}
-  bottom: calc(env(safe-area-inset-bottom, 0) + ${applyVar('inset')});
+  bottom: calc(${applyVar('safe-area-bottom')} + ${applyVar('inset')});
   display: flex;
   pointer-events: none;
   position: fixed;

diff --git a/hera/ui/Message.tsx b/hera/ui/Message.tsx
@@ -197,15 +197,14 @@ export default function Message(props: Props) {
 const vars = new CSSVariables<'multiplier'>('ui-m');
 
 const containerStyle = css`
+  bottom: ${applyVar('safe-area-bottom')};
   display: flex;
   image-rendering: pixelated;
+  inset: 0;
   pointer-events: none;
   position: fixed;
-  z-index: 3001;
-
-  inset: 0;
   top: ${applyVar('safe-area-top')};
-  bottom: env(safe-area-inset-bottom);
+  z-index: 3001;
 `;
 
 const topStyle = css`

diff --git a/ui/CSS.tsx b/ui/CSS.tsx
@@ -322,12 +322,14 @@ body .all-fonts {
 }
 
 :root {
-  ${cssVar('safe-area-top', isAndroid ? `${TileSize / 2}px` : 'env(safe-area-inset-top)')}
+  ${cssVar('safe-area-top', isAndroid ? `${TileSize / 2}px` : 'env(safe-area-inset-top, 0)')}
+  ${cssVar('safe-area-bottom', isAndroid ? `${TileSize / 2}px` : 'env(safe-area-inset-bottom, 0)')}
 }
-
+  
 @media (orientation: portrait) {
   :root {
-    ${cssVar('safe-area-top', isAndroid ? `${DoubleSize}px` : 'env(safe-area-inset-top)')}
+    ${cssVar('safe-area-top', isAndroid ? `${DoubleSize}px` : 'env(safe-area-inset-top, 0)')}
+    ${cssVar('safe-area-bottom', isAndroid ? `${DoubleSize}px` : 'env(safe-area-inset-bottom, 0)')}
   }
 
   body {

diff --git a/ui/cssVar.tsx b/ui/cssVar.tsx
@@ -33,10 +33,11 @@ type GlobalCSSVariableName =
   | 'color-red-orange'
   | 'color-silver'
   | 'error-color'
+  | 'safe-area-bottom'
+  | 'safe-area-top'
   | 'transform-origin'
   | 'ui-is-scaled'
   | 'ui-scale'
-  | 'safe-area-top'
   // Map Editor insets
   | 'inset'
   | 'inset-z'