Keep system status bar out of the Action Bar area

glastonbridge · web-flow · commit 367a8cc89ca4 · 2025-12-04T09:12:35.000Z
Top padding to respect the safe area on mobile.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 /dist/
-/.idea/
+.idea/
 /node_modules/
 
 .DS_Store
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':capacitor-status-bar')
+    implementation project(':capacitor-community-safe-area')
 
 }
 
diff --git a/android/app/src/main/java/org/microbit/createai/MainActivity.java b/android/app/src/main/java/org/microbit/createai/MainActivity.java
@@ -1,5 +1,15 @@
 package org.microbit.createai;
 
+import androidx.activity.EdgeToEdge;
+
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+
+    @Override
+    public void onStart() {
+        super.onStart();
+        EdgeToEdge.enable(this);
+    }
+
+}
diff --git a/android/build.gradle b/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.7.2'
+        classpath 'com.android.tools.build:gradle:8.13.1'
         classpath 'com.google.gms:google-services:4.4.2'
 
         // NOTE: Do not place your application dependencies here; they belong
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
@@ -2,5 +2,5 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
-include ':capacitor-status-bar'
-project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+include ':capacitor-community-safe-area'
+project(':capacitor-community-safe-area').projectDir = new File('../node_modules/@capacitor-community/safe-area/android')
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/capacitor.config.ts b/capacitor.config.ts
@@ -3,7 +3,10 @@ import type { CapacitorConfig } from '@capacitor/cli';
 const config: CapacitorConfig = {
   appId: 'org.microbit.createai',
   appName: 'micro:bit CreateAI',
-  webDir: 'dist'
+  webDir: 'dist',
+  android: {
+    adjustMarginsForEdgeToEdge: 'disable'
+  }
 };
 
 export default config;
diff --git a/index.html b/index.html
@@ -62,8 +62,6 @@
     style="
       overscroll-behavior-y: none;
       height: 100%;
-      padding-top: env(safe-area-inset-top);
-      padding-bottom: env(safe-area-inset-bottom);
     "
   >
     <div id="root" style="overscroll-behavior-y: none; height: 100%"></div>
diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -11,7 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CapacitorCommunitySafeArea', :path => '../../node_modules/@capacitor-community/safe-area'
 end
 
 target 'App' do
diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock
@@ -1,28 +1,28 @@
 PODS:
   - Capacitor (7.4.4):
     - CapacitorCordova
-  - CapacitorCordova (7.4.4)
-  - CapacitorStatusBar (7.0.3):
+  - CapacitorCommunitySafeArea (7.0.0-beta.5):
     - Capacitor
+  - CapacitorCordova (7.4.4)
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorCommunitySafeArea (from `../../node_modules/@capacitor-community/safe-area`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
-  - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
 
 EXTERNAL SOURCES:
   Capacitor:
     :path: "../../node_modules/@capacitor/ios"
+  CapacitorCommunitySafeArea:
+    :path: "../../node_modules/@capacitor-community/safe-area"
   CapacitorCordova:
     :path: "../../node_modules/@capacitor/ios"
-  CapacitorStatusBar:
-    :path: "../../node_modules/@capacitor/status-bar"
 
 SPEC CHECKSUMS:
-  Capacitor: 09d9ff8e9618e8c4b3cab2bbee34a17215dd2fef
+  Capacitor: 358dd1c3fdd71d969547b17e159fd8a7736cb45f
+  CapacitorCommunitySafeArea: 53e3ad999bada9892cb4e9aca8fa8012aabad4b2
   CapacitorCordova: bf648a636f3c153f652d312ae145fb508b6ffced
-  CapacitorStatusBar: 7d8fcbd6768db014bd721d75e246590b014928e8
 
-PODFILE CHECKSUM: 2dda0cc353931d1c074294a0067df65453b878b5
+PODFILE CHECKSUM: b14023669789a78b7a53c7515766b1a886b64d37
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,10 +58,10 @@
     "vitest-dom": "^0.1.1"
   },
   "dependencies": {
+    "@capacitor-community/safe-area": "^7.0.0-beta.5",
     "@capacitor/android": "^7.4.4",
     "@capacitor/core": "^7.4.4",
     "@capacitor/ios": "^7.4.4",
-    "@capacitor/status-bar": "^7.0.3",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,8 +6,6 @@
  */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { ChakraProvider, useToast } from "@chakra-ui/react";
-import { Capacitor } from "@capacitor/core";
-import { StatusBar, Style } from "@capacitor/status-bar";
 import { MakeCodeFrameDriver } from "@microbit/makecode-embed/react";
 import {
   createRadioBridgeConnection,
@@ -59,6 +57,8 @@ import {
   createNewPageUrl,
   createTestingModelPageUrl,
 } from "./urls";
+import { SafeArea, SystemBarsStyle } from "@capacitor-community/safe-area";
+import { Capacitor } from "@capacitor/core";
 
 export interface ProviderLayoutProps {
   children: ReactNode;
@@ -208,13 +208,9 @@ const createRouter = () => {
 
 const App = () => {
   useEffect(() => {
-    // Configure status bar for native platforms
     if (Capacitor.isNativePlatform()) {
-      StatusBar.setStyle({ style: Style.Light }).catch((err) => {
-        logging.error(err);
-      });
-      StatusBar.setOverlaysWebView({ overlay: false }).catch((err) => {
-        logging.error(err);
+      void SafeArea.setSystemBarsStyle({
+        style: SystemBarsStyle.Dark,
       });
     }
 
diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx
@@ -25,10 +25,15 @@ const ActionBar = ({
       as="header"
       alignItems="center"
       justifyContent="space-between"
-      bgColor="brand2.500"
-      h="64px"
       gap={0}
-      minH="64px"
+      sx={{
+        // Pad the action bar when it appears under the system status bar
+        maxHeight: "calc(64px + env(safe-area-inset-top))",
+        height: "calc(64px + env(safe-area-inset-top))",
+        paddingTop: "env(safe-area-inset-top)",
+        background:
+          "linear-gradient(to bottom, var(--chakra-colors-brand2-600) env(safe-area-inset-top), var(--chakra-colors-brand2-500) env(safe-area-inset-top))",
+      }}
       {...rest}
     >
       <HStack
diff --git a/src/components/EditCodeDialog.tsx b/src/components/EditCodeDialog.tsx
@@ -24,11 +24,14 @@ const EditCodeDialog = forwardRef<MakeCodeFrameDriver, EditCodeDialogProps>(
       <Flex
         w="100%"
         h="100%"
-        bgColor="white"
+        bgColor="#3454D1" // Matches MakeCode behind status bar, for edge-to-edge appearance
         left={isOpen ? undefined : "-150vw"}
         top={isOpen ? undefined : "-150vh"}
         visibility={isOpen ? "visible" : "hidden"}
         position={isOpen ? undefined : "absolute"}
+        sx={{
+          paddingTop: "env(safe-area-inset-top)",
+        }}
       >
         <Editor ref={ref} style={{ flexGrow: 1 }} />
       </Flex>

-Original file line number
+Diff line change
@@ @@ -1,5 +1,5 @@ @@
 /dist/
 -/.idea/
 +.idea/
 /node_modules/
 .DS_Store
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ android {`
`9`	`9`
`10`	`10`	`apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"`
`11`	`11`	`dependencies {`
`12`		`- implementation project(':capacitor-status-bar')`
	`12`	`+ implementation project(':capacitor-community-safe-area')`
`13`	`13`
`14`	`14`	`}`
`15`	`15`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ buildscript {`
`7`	`7`	`mavenCentral()`
`8`	`8`	`}`
`9`	`9`	`dependencies {`
`10`		`- classpath 'com.android.tools.build:gradle:8.7.2'`
	`10`	`+ classpath 'com.android.tools.build:gradle:8.13.1'`
`11`	`11`	`classpath 'com.google.gms:google-services:4.4.2'`
`12`	`12`
`13`	`13`	`// NOTE: Do not place your application dependencies here; they belong`
Original file line number	Diff line number	Diff line change
`@@ -62,8 +62,6 @@`
`62`	`62`	`style="`
`63`	`63`	`overscroll-behavior-y: none;`
`64`	`64`	`height: 100%;`
`65`		`- padding-top: env(safe-area-inset-top);`
`66`		`- padding-bottom: env(safe-area-inset-bottom);`
`67`	`65`	`"`
`68`	`66`	`>`
`69`	`67`	`<div id="root" style="overscroll-behavior-y: none; height: 100%"></div>`