Wait, so Android just doesn't do safe areas at all or what?

GitOrigin-RevId: 0928342e1d9c4e9956d8f8c5dae9c4f7cbe9f2ff
nkzw-tech · Jan 30, 2025 · 2bf64b0 · 2bf64b0
1 parent 336a5e8
commit 2bf64b0
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 26 deletions.
diff --git a/hera/campaign/CampaignEditor.tsx b/hera/campaign/CampaignEditor.tsx
@@ -16,7 +16,7 @@ import unrollCampaign from '@deities/hermes/unrollCampaign.tsx';
 import validateCampaign from '@deities/hermes/validateCampaign.tsx';
 import { App } from '@deities/ui/App.tsx';
 import Breakpoints, { sm } from '@deities/ui/Breakpoints.tsx';
-import { isIOS } from '@deities/ui/Browser.tsx';
+import { isAndroid, isIOS } from '@deities/ui/Browser.tsx';
 import useInput from '@deities/ui/controls/useInput.tsx';
 import { applyVar, insetStyle } from '@deities/ui/cssVar.tsx';
 import Dialog, { DialogScrollContainer } from '@deities/ui/Dialog.tsx';
@@ -282,7 +282,7 @@ export default function CampaignEditor({
     (mapId: string, mode?: EditorMode, scenario?: Scenario) => {
       const node = maps.get(mapId);
       if (node) {
-        if (isIOS) {
+        if (isIOS || isAndroid) {
           navigate(getMapRoute(node.slug, 'edit'));
           return;
         }
@@ -702,15 +702,15 @@ const lightColorStyle = css`
 
 const mapCreateButtonStyle = css`
   right: ${TileSize * 3}px;
-  top: env(safe-area-inset-top);
+  top: ${applyVar('safe-area-top')};
 `;
 
 const dialogueButtonStyle = css`
   align-items: center;
   display: inline-flex;
   justify-content: center;
   right: ${TileSize * 6}px;
-  top: env(safe-area-inset-top);
+  top: ${applyVar('safe-area-top')};
 
   > svg {
     height: 40px;

diff --git a/hera/editor/lib/ZoomButton.tsx b/hera/editor/lib/ZoomButton.tsx
@@ -47,7 +47,7 @@ export default function ZoomButton({
 
 const topStyle = css`
   right: env(safe-area-inset-right);
-  top: env(safe-area-inset-top);
+  top: ${applyVar('safe-area-top')};
 `;
 
 const zoomContainerStyle = css`

diff --git a/hera/ui/ActionBar.tsx b/hera/ui/ActionBar.tsx
@@ -1,6 +1,6 @@
 import { DoubleSize } from '@deities/athena/map/Configuration.tsx';
 import Box from '@deities/ui/Box.tsx';
-import { CSSVariables } from '@deities/ui/cssVar.tsx';
+import { applyVar, CSSVariables } from '@deities/ui/cssVar.tsx';
 import { css, cx } from '@emotion/css';
 import { ComponentProps } from 'react';
 
@@ -38,7 +38,7 @@ const actionBarStyle = css`
   pointer-events: none;
   position: fixed;
   right: 0;
-  top: calc(env(safe-area-inset-top) + ${DoubleSize * 1.3}px);
+  top: calc(${applyVar('safe-area-top')} + ${DoubleSize * 1.3}px);
   transform: translate3d(${vars.apply('x')}, -100%, 0) scale(0.9);
   transition:
     opacity 150ms ease,
@@ -50,7 +50,7 @@ const actionBarStyle = css`
 const regularStyle = css`
   @media (min-width: 1100px) {
     ${vars.set('x', '24px')}
-    top: calc(env(safe-area-inset-top) + 8px);
+    top: calc(${applyVar('safe-area-top')} + 8px);
   }
 
   @media (min-width: 1300px) {

diff --git a/hera/ui/CharacterMessage.tsx b/hera/ui/CharacterMessage.tsx
@@ -4,7 +4,7 @@ import AudioPlayer from '@deities/ui/AudioPlayer.tsx';
 import Breakpoints, { lg, sm } from '@deities/ui/Breakpoints.tsx';
 import throttle from '@deities/ui/controls/throttle.tsx';
 import useInput from '@deities/ui/controls/useInput.tsx';
-import cssVar, { CSSVariables } from '@deities/ui/cssVar.tsx';
+import cssVar, { applyVar, CSSVariables } from '@deities/ui/cssVar.tsx';
 import gradient from '@deities/ui/gradient.tsx';
 import Icon from '@deities/ui/Icon.tsx';
 import { MenuClassName } from '@deities/ui/Menu.tsx';
@@ -321,7 +321,7 @@ const containerStyle = css`
   z-index: 3001;
   inset: 0;
 
-  top: env(safe-area-inset-top);
+  top: ${applyVar('safe-area-top')};
   bottom: env(safe-area-inset-bottom);
 `;
 

diff --git a/hera/ui/Message.tsx b/hera/ui/Message.tsx
@@ -2,7 +2,7 @@ import { AnimationConfig } from '@deities/athena/map/Configuration.tsx';
 import Breakpoints, { sm } from '@deities/ui/Breakpoints.tsx';
 import throttle from '@deities/ui/controls/throttle.tsx';
 import useInput from '@deities/ui/controls/useInput.tsx';
-import { CSSVariables } from '@deities/ui/cssVar.tsx';
+import { applyVar, CSSVariables } from '@deities/ui/cssVar.tsx';
 import gradient from '@deities/ui/gradient.tsx';
 import Icon from '@deities/ui/Icon.tsx';
 import Portal from '@deities/ui/Portal.tsx';
@@ -204,7 +204,7 @@ const containerStyle = css`
   z-index: 3001;
 
   inset: 0;
-  top: env(safe-area-inset-top);
+  top: ${applyVar('safe-area-top')};
   bottom: env(safe-area-inset-bottom);
 `;
 

diff --git a/hera/ui/Notification.tsx b/hera/ui/Notification.tsx
@@ -91,12 +91,12 @@ const bottomStyle = css`
 
 const topStyle = css`
   margin: 0 auto;
-  top: calc(env(safe-area-inset-top) + ${applyVar('inset')});
+  top: calc(${applyVar('safe-area-top')} + ${applyVar('inset')});
 `;
 
 const topRightStyle = css`
   right: ${applyVar('inset')};
-  top: calc(env(safe-area-inset-top) + ${applyVar('inset')});
+  top: calc(${applyVar('safe-area-top')} + ${applyVar('inset')});
 `;
 
 const boxStyle = css`

diff --git a/ui/CSS.tsx b/ui/CSS.tsx
@@ -1,8 +1,9 @@
+import { DoubleSize, TileSize } from '@deities/athena/map/Configuration.tsx';
 import { injectGlobal } from '@emotion/css';
 import Background from './assets/Background.png';
 import Breakpoints from './Breakpoints.tsx';
-import { isLinux } from './Browser.tsx';
-import { applyVar, initializeCSSVariables } from './cssVar.tsx';
+import { isAndroid, isLinux } from './Browser.tsx';
+import cssVar, { applyVar, initializeCSSVariables } from './cssVar.tsx';
 import getColor from './getColor.tsx';
 import pixelBorder from './pixelBorder.tsx';
 
@@ -124,7 +125,7 @@ input[type="checkbox"] {
   &:not(.disabled):active {
     transform: scale(0.9);
   }
-  
+
   &:before {
     color: rgba(0, 0, 0, 0);
     content: 'X';
@@ -179,11 +180,11 @@ label.focus {
 button {
   cursor: pointer;
   width: fit-content;
-  
+
   &:hover, &:focus, &:active {
     color: ${getColor('pink')};
   }
-  
+
   &:active {
     margin-top: 6px;
     margin-bottom: 2px;
@@ -320,9 +321,17 @@ body .all-fonts {
   font-family: Athena, PressStart2P, MadouFutoMaru, ui-sans-serif, system-ui, sans-serif;
 }
 
+:root {
+  ${cssVar('safe-area-top', isAndroid ? `${TileSize / 2}px` : 'env(safe-area-inset-top)')}
+}
+
 @media (orientation: portrait) {
+  :root {
+    ${cssVar('safe-area-top', isAndroid ? `${DoubleSize}px` : 'env(safe-area-inset-top)')}
+  }
+
   body {
-    margin-top: env(safe-area-inset-top);
+    margin-top: ${applyVar('safe-area-top')};
   }
 }
 

diff --git a/ui/Dialog.tsx b/ui/Dialog.tsx
@@ -294,7 +294,7 @@ const containerStyle = css`
   bottom: ${DoubleSize}px;
   pointer-events: all;
   position: fixed;
-  top: calc(env(safe-area-inset-top) + ${DoubleSize * 2.2}px);
+  top: calc(${applyVar('safe-area-top')} + ${DoubleSize * 2.2}px);
   transform: ${isSafari ? '' : `scale(${applyVar('ui-scale')})`};
   transition: transform 300ms ease;
   width: 93vw;
@@ -333,7 +333,7 @@ const sizes = {
     ${Breakpoints.sm} {
       height: min(480px, 46vh);
       top: calc(
-        env(safe-area-inset-top) +
+        ${applyVar('safe-area-top')} +
           max(${DoubleSize * 2.2}px, calc(50vh - max(20vh, 210px)))
       );
       width: min(90vw, 600px);

diff --git a/ui/Menu.tsx b/ui/Menu.tsx
@@ -272,7 +272,7 @@ const dotStyle = css`
 
 const buttonStyle = css`
   left: env(safe-area-inset-left);
-  top: env(safe-area-inset-top);
+  top: ${applyVar('safe-area-top')};
 `;
 
 const openButtonStyle = css`
@@ -293,7 +293,7 @@ const openStyle = css`
 
   background-color: ${applyVar('background-color-light')};
   border-width: ${size}px;
-  border-top-width: calc(${size}px + env(safe-area-inset-top));
+  border-top-width: calc(${size}px + ${applyVar('safe-area-top')});
   height: 100%;
   transition:
     border-width 300ms ease,
@@ -373,7 +373,7 @@ const controlsContainerStyle = css`
   pointer-events: none;
   position: fixed;
   right: 0;
-  top: env(safe-area-inset-top);
+  top: ${applyVar('safe-area-top')};
 
   > div {
     opacity: 0;

diff --git a/ui/PrimaryExpandableMenuButton.tsx b/ui/PrimaryExpandableMenuButton.tsx
@@ -41,7 +41,7 @@ const style = css`
   min-height: ${size}px;
   overflow: hidden;
   pointer-events: auto;
-  top: calc(env(safe-area-inset-top) + ${applyVar('inset')});
+  top: calc(${applyVar('safe-area-top')} + ${applyVar('inset')});
   width: calc(100vw - ${size * 3}px);
   z-index: max(calc(${applyVar('inset-z')} + 2), 20);
 

diff --git a/ui/cssVar.tsx b/ui/cssVar.tsx
@@ -36,6 +36,7 @@ type GlobalCSSVariableName =
   | 'transform-origin'
   | 'ui-is-scaled'
   | 'ui-scale'
+  | 'safe-area-top'
   // Map Editor insets
   | 'inset'
   | 'inset-z'