feat(android): safe area, dark mode, crash fix, icons, editor layout, 16KB alignment

backend/tauri-mobile/dev-android.sh

···
 echo "[dev] Starting tauri android dev..."
 echo ""
 cd "$SCRIPT_DIR"
-npx tauri android dev --target aarch64
+npx tauri android dev

backend/tauri-mobile/peek-core/build.rs

···
 fn main() {
+    let target = std::env::var("TARGET").unwrap_or_default();
+    if target.contains("android") {
+        println!("cargo:rustc-link-arg=-Wl,-z,max-page-size=16384");
+    }
     uniffi::generate_scaffolding("src/peek_core.udl").unwrap();
 }

backend/tauri-mobile/src-tauri/.cargo/config.toml

···
+# Android 16KB page alignment is handled in build.rs and peek-core/build.rs
+# via cargo:rustc-link-arg. This file is intentionally minimal because
+# the Tauri CLI sets CARGO_ENCODED_RUSTFLAGS which overrides rustflags here.

backend/tauri-mobile/src-tauri/build.rs

···
 fn main() {
+    let target = std::env::var("TARGET").unwrap();
+
     // Compile Objective-C bridge for iOS
-    let target = std::env::var("TARGET").unwrap();
     if target.contains("ios") {
         cc::Build::new()
             .file("AppGroupBridge.m")
             .compile("app_group_bridge");
 
         println!("cargo:rustc-link-lib=framework=Foundation");
+    }
+
+    // Android 16KB page size alignment (required for Android 15+ / API 35+)
+    // This ensures LOAD segments in the .so are aligned to 16384 bytes.
+    // Using cargo:rustc-link-arg here because .cargo/config.toml rustflags
+    // can be overridden by CARGO_ENCODED_RUSTFLAGS set by the Tauri CLI.
+    if target.contains("android") {
+        println!("cargo:rustc-link-arg=-Wl,-z,max-page-size=16384");
     }
 
     tauri_build::build()

backend/tauri-mobile/src-tauri/gen/android/app/src/main/AndroidManifest.xml

···
 
     <application
         android:icon="@mipmap/ic_launcher"
+        android:roundIcon="@mipmap/ic_launcher_round"
         android:label="@string/app_name"
         android:theme="@style/Theme.peek_save"
         android:usesCleartextTraffic="${usesCleartextTraffic}">

backend/tauri-mobile/src-tauri/gen/android/app/src/main/assets/tauri.conf.json

···
-{"$schema":"https://schema.tauri.app/config/2","productName":"Peek Save","version":"0.1.0","identifier":"com.dietrich.peek-mobile","app":{"windows":[{"label":"main","create":true,"url":"index.html","userAgent":"Mozilla/5.0 (iPhone; CPU iPhone OS 18_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Mobile/15E148 Safari/604.1","dragDropEnabled":true,"center":false,"width":800.0,"height":600.0,"resizable":true,"maximizable":true,"minimizable":true,"closable":true,"title":"Peek Save","fullscreen":false,"focus":true,"focusable":true,"transparent":false,"maximized":false,"visible":true,"decorations":true,"alwaysOnBottom":false,"alwaysOnTop":false,"visibleOnAllWorkspaces":false,"contentProtected":false,"skipTaskbar":false,"titleBarStyle":"Visible","hiddenTitle":false,"acceptFirstMouse":false,"shadow":true,"incognito":false,"zoomHotkeysEnabled":false,"browserExtensionsEnabled":false,"useHttpsScheme":false,"javascriptDisabled":false,"allowLinkPreview":true,"disableInputAccessoryView":true,"scrollBarStyle":"default"}],"security":{"freezePrototype":false,"dangerousDisableAssetCspModification":false,"assetProtocol":{"scope":[],"enable":false},"pattern":{"use":"brownfield"},"capabilities":[]},"macOSPrivateApi":false,"withGlobalTauri":false,"enableGTKAppId":false},"build":{"devUrl":"http://192.168.50.69:5188/","frontendDist":"../dist","beforeDevCommand":"npm run dev","beforeBuildCommand":"","removeUnusedCommands":false,"additionalWatchFolders":[]},"bundle":{"active":true,"targets":"all","createUpdaterArtifacts":false,"icon":["icons/32x32.png","icons/128x128.png","icons/[e-mail]","icons/icon.icns","icons/icon.ico"],"useLocalToolsDir":false,"windows":{"digestAlgorithm":null,"certificateThumbprint":null,"timestampUrl":null,"tsp":false,"webviewInstallMode":{"type":"downloadBootstrapper","silent":true},"allowDowngrades":true,"wix":null,"nsis":null,"signCommand":null},"linux":{"appimage":{"bundleMediaFramework":false,"files":{}},"deb":{"files":{}},"rpm":{"release":"1","epoch":0,"files":{}}},"macOS":{"files":{},"minimumSystemVersion":"10.13","hardenedRuntime":true,"dmg":{"windowSize":{"width":660,"height":400},"appPosition":{"x":180,"y":170},"applicationFolderPosition":{"x":480,"y":170}}},"iOS":{"developmentTeam":"TXZTDLL5LC","minimumSystemVersion":"14.0"},"android":{"minSdkVersion":24,"autoIncrementVersionCode":false}},"plugins":{}}
+{"$schema":"https://schema.tauri.app/config/2","productName":"Peek Save","version":"0.1.0","identifier":"com.dietrich.peek-mobile","app":{"windows":[{"label":"main","create":true,"url":"index.html","userAgent":"Mozilla/5.0 (iPhone; CPU iPhone OS 18_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Mobile/15E148 Safari/604.1","dragDropEnabled":true,"center":false,"width":800.0,"height":600.0,"resizable":true,"maximizable":true,"minimizable":true,"closable":true,"title":"Peek Save","fullscreen":false,"focus":true,"focusable":true,"transparent":false,"maximized":false,"visible":true,"decorations":true,"alwaysOnBottom":false,"alwaysOnTop":false,"visibleOnAllWorkspaces":false,"contentProtected":false,"skipTaskbar":false,"titleBarStyle":"Visible","hiddenTitle":false,"acceptFirstMouse":false,"shadow":true,"incognito":false,"zoomHotkeysEnabled":false,"browserExtensionsEnabled":false,"useHttpsScheme":false,"javascriptDisabled":false,"allowLinkPreview":true,"disableInputAccessoryView":true,"scrollBarStyle":"default"}],"security":{"freezePrototype":false,"dangerousDisableAssetCspModification":false,"assetProtocol":{"scope":[],"enable":false},"pattern":{"use":"brownfield"},"capabilities":[]},"macOSPrivateApi":false,"withGlobalTauri":false,"enableGTKAppId":false},"build":{"devUrl":"http://192.168.50.69:1420/","frontendDist":"../dist","beforeDevCommand":"npm run dev","beforeBuildCommand":"npm run build","removeUnusedCommands":false,"additionalWatchFolders":[]},"bundle":{"active":true,"targets":"all","createUpdaterArtifacts":false,"icon":["icons/32x32.png","icons/128x128.png","icons/[e-mail]","icons/icon.icns","icons/icon.ico"],"useLocalToolsDir":false,"windows":{"digestAlgorithm":null,"certificateThumbprint":null,"timestampUrl":null,"tsp":false,"webviewInstallMode":{"type":"downloadBootstrapper","silent":true},"allowDowngrades":true,"wix":null,"nsis":null,"signCommand":null},"linux":{"appimage":{"bundleMediaFramework":false,"files":{}},"deb":{"files":{}},"rpm":{"release":"1","epoch":0,"files":{}}},"macOS":{"files":{},"minimumSystemVersion":"10.13","hardenedRuntime":true,"dmg":{"windowSize":{"width":660,"height":400},"appPosition":{"x":180,"y":170},"applicationFolderPosition":{"x":480,"y":170}}},"iOS":{"developmentTeam":"TXZTDLL5LC","minimumSystemVersion":"14.0"},"android":{"minSdkVersion":24,"autoIncrementVersionCode":false}},"plugins":{}}

backend/tauri-mobile/src-tauri/gen/android/app/src/main/java/com/dietrich/peek_mobile/MainActivity.kt

···
 package com.dietrich.peek_mobile
 
+import android.content.res.Configuration
+import android.os.Build
 import android.os.Bundle
 import android.webkit.WebView
 import androidx.activity.enableEdgeToEdge
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
+import androidx.webkit.WebSettingsCompat
+import androidx.webkit.WebViewFeature
 
 class MainActivity : TauriActivity() {
+  // Cached safe-area JS snippet, updated by insets listener
+  private var safeAreaJs: String? = null
+  private var webViewRef: WebView? = null
+
   override fun onCreate(savedInstanceState: Bundle?) {
-    enableEdgeToEdge()
     super.onCreate(savedInstanceState)
+    enableEdgeToEdge()
+  }
+
+  private fun isSystemDarkMode(): Boolean {
+    val nightMode = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+    return nightMode == Configuration.UI_MODE_NIGHT_YES
+  }
+
+  private fun buildSafeAreaJs(topDp: Float, bottomDp: Float, leftDp: Float, rightDp: Float): String {
+    return """
+      document.documentElement.style.setProperty('--safe-area-top', '${topDp}px');
+      document.documentElement.style.setProperty('--safe-area-bottom', '${bottomDp}px');
+      document.documentElement.style.setProperty('--safe-area-left', '${leftDp}px');
+      document.documentElement.style.setProperty('--safe-area-right', '${rightDp}px');
+    """.trimIndent()
+  }
+
+  private fun injectDarkModeState(webView: WebView) {
+    val isDark = isSystemDarkMode()
+    webView.evaluateJavascript(
+      "window.__ANDROID_DARK_MODE__ = $isDark;",
+      null
+    )
   }
 
   override fun onWebViewCreate(webView: WebView) {
+    webViewRef = webView
+
+    // Enable WebView dark mode support so prefers-color-scheme media query works.
+    // On API 33+ (Android 13), use WebView's built-in algorithmic darkening.
+    // On older APIs, use AndroidX WebSettingsCompat.
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+      webView.settings.isAlgorithmicDarkeningAllowed = true
+    } else if (WebViewFeature.isFeatureSupported(WebViewFeature.ALGORITHMIC_DARKENING)) {
+      WebSettingsCompat.setAlgorithmicDarkeningAllowed(webView.settings, true)
+    }
+
+    // Inject safe-area and dark mode via a WebChromeClient, which doesn't conflict
+    // with Tauri's RustWebViewClient (they are independent — WebViewClient vs WebChromeClient).
+    webView.webChromeClient = object : android.webkit.WebChromeClient() {
+      override fun onProgressChanged(view: WebView?, newProgress: Int) {
+        super.onProgressChanged(view, newProgress)
+        // Inject once the page is mostly loaded
+        if (newProgress >= 80 && view != null) {
+          safeAreaJs?.let { view.evaluateJavascript(it, null) }
+          injectDarkModeState(view)
+        }
+      }
+    }
+
     // Android WebView does not expose env(safe-area-inset-*) CSS variables,
     // so we bridge them from the native WindowInsets API as CSS custom properties.
     ViewCompat.setOnApplyWindowInsetsListener(webView) { view, insets ->
···
       val bottomDp = systemBars.bottom / density
       val leftDp = systemBars.left / density
       val rightDp = systemBars.right / density
-      val js = """
-        document.documentElement.style.setProperty('--android-safe-area-top', '${topDp}px');
-        document.documentElement.style.setProperty('--android-safe-area-bottom', '${bottomDp}px');
-        document.documentElement.style.setProperty('--android-safe-area-left', '${leftDp}px');
-        document.documentElement.style.setProperty('--android-safe-area-right', '${rightDp}px');
-      """.trimIndent()
-      webView.evaluateJavascript(js, null)
+      safeAreaJs = buildSafeAreaJs(topDp, bottomDp, leftDp, rightDp)
+      webView.evaluateJavascript(safeAreaJs!!, null)
       insets
     }
     ViewCompat.requestApplyInsets(webView)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    // Re-inject dark mode state when system theme changes
+    webViewRef?.let { injectDarkModeState(it) }
   }
 }

backend/tauri-mobile/src-tauri/gen/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

···
+<?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt"
     android:width="108dp"
     android:height="108dp"
     android:viewportWidth="108"
     android:viewportHeight="108">
-    <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
-        <aapt:attr name="android:fillColor">
-            <gradient
-                android:endX="85.84757"
-                android:endY="92.4963"
-                android:startX="42.9492"
-                android:startY="49.59793"
-                android:type="linear">
-                <item
-                    android:color="#44000000"
-                    android:offset="0.0" />
-                <item
-                    android:color="#00000000"
-                    android:offset="1.0" />
-            </gradient>
-        </aapt:attr>
-    </path>
     <path
-        android:fillColor="#FFFFFF"
-        android:fillType="nonZero"
-        android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
-        android:strokeWidth="1"
-        android:strokeColor="#00000000" />
-</vector>
+        android:fillColor="#00000000"
+        android:pathData="M0,0h108v108h-108z" />
+</vector>

backend/tauri-mobile/src-tauri/gen/android/app/src/main/res/drawable/ic_launcher_background.xml

···
     android:viewportWidth="108"
     android:viewportHeight="108">
     <path
-        android:fillColor="#3DDC84"
+        android:fillColor="#FFFFFF"
         android:pathData="M0,0h108v108h-108z" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M9,0L9,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,0L19,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,0L29,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,0L39,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,0L49,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,0L59,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,0L69,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,0L79,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M89,0L89,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M99,0L99,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,9L108,9"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,19L108,19"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,29L108,29"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,39L108,39"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,49L108,49"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,59L108,59"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,69L108,69"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,79L108,79"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,89L108,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,99L108,99"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,29L89,29"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,39L89,39"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,49L89,49"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,59L89,59"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,69L89,69"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,79L89,79"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,19L29,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,19L39,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,19L49,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,19L59,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,19L69,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,19L79,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
 </vector>

backend/tauri-mobile/src-tauri/gen/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

···
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

backend/tauri-mobile/src-tauri/gen/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

···
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

backend/tauri-mobile/src-tauri/gen/android/app/src/main/res/values/ic_launcher_background.xml

···
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>

backend/tauri-mobile/src-tauri/tauri.conf.json

···
   "identifier": "com.dietrich.peek-mobile",
   "build": {
     "beforeDevCommand": "npm run dev",
-    "beforeBuildCommand": "",
+    "beforeBuildCommand": "npm run build",
     "frontendDist": "../dist",
-    "devUrl": "http://192.168.50.69:5188"
+    "devUrl": "http://localhost:1420"
   },
   "app": {
     "windows": [

backend/tauri-mobile/src/App.css

···
 }
 
 :root {
-  color-scheme: light dark;
+  color-scheme: light;
   font-family: "ServerMono", monospace;
   font-size: 16px;
   line-height: 1.5;
···
   -moz-osx-font-smoothing: grayscale;
 }
 
+body.dark {
+  color-scheme: dark;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
···
 input, textarea {
   -webkit-user-select: text;
   user-select: text;
+  color: inherit;
 }
 
 html, body {
···
 header {
   background: #ffffff;
   padding: 0.25rem 0.75rem;
-  /* Android injects --android-safe-area-top via MainActivity; iOS uses env() */
-  padding-top: calc(var(--android-safe-area-top, env(safe-area-inset-top, 0px)) + 0.4rem);
+  /* Safe area: --safe-area-top is set by JS on mount (env() for iOS, Kotlin bridge for Android).
+     Fallback 40px ensures header clears notch/status bar even before JS runs. */
+  padding-top: calc(var(--safe-area-top, 40px) + 0.4rem);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
···
   -webkit-overflow-scrolling: touch;
   overscroll-behavior-y: contain;
   padding: 1rem;
-  padding-bottom: calc(var(--android-safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 1rem);
+  padding-bottom: calc(var(--safe-area-bottom, 0px) + 1rem);
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
···
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  /* height is set dynamically via visualViewport — no bottom: 0 */
+  height: 100%;
   background: rgba(0, 0, 0, 0.4);
   z-index: 1000;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0.5rem;
-  padding-top: var(--android-safe-area-top, env(safe-area-inset-top, 4px));
+  padding-top: var(--safe-area-top, 40px);
   /* Ensure safe area padding at bottom when keyboard is hidden */
-  padding-bottom: max(var(--android-safe-area-bottom, env(safe-area-inset-bottom, 0px)), 0.5rem);
+  padding-bottom: max(var(--safe-area-bottom, 0px), 0.5rem);
   /* Prevent iOS from scrolling the viewport when keyboard appears */
   overflow: hidden;
   overscroll-behavior: contain;
+  box-sizing: border-box;
+}
+
+/* When keyboard is open, no bottom safe-area padding needed — keyboard covers it */
+.edit-overlay.keyboard-open {
+  padding-bottom: 4px;
 }
 
 .edit-overlay.transition-padding {
···
   font-family: inherit;
   background: transparent;
   box-sizing: border-box;
+  color: #0f0f0f;
 }
 
 .expandable-card-input:focus {
···
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
+  /* Cap textarea at half the card so tags + buttons stay visible */
+  max-height: 50%;
 }
 
 .resizable-input-textarea {
···
   min-height: 0;
   box-sizing: border-box;
   background: transparent;
+  color: #0f0f0f;
 }
 
 .resizable-input-textarea:focus {
···
   max-height: 140px;
 }
 
+/* When keyboard is open, limit tags to ~3 rows and scroll overflow.
+   Each tag row is ~32px + gap, so 3 rows ≈ 108px plus input row. */
+.keyboard-open .editor-tags-section {
+  flex: 0 1 auto;
+  /* ~3 rows of tags (32px each) + tag input row (~44px) + padding */
+  max-height: 152px;
+  overflow-y: auto;
+}
+
 /* Editor Buttons - always visible at bottom */
 .editor-buttons {
   flex-shrink: 0;
···
   border-radius: 12px 12px 0 0;
   resize: none;
   min-height: 0;
+  color: #0f0f0f;
 }
 
 .text-editor-drag-handle {
···
 /* Toast notifications */
 .toast {
   position: fixed;
-  bottom: calc(var(--android-safe-area-bottom, env(safe-area-inset-bottom, 0px)) + 80px);
+  bottom: calc(var(--safe-area-bottom, 0px) + 80px);
   left: 50%;
   transform: translateX(-50%);
   padding: 0.75rem 1.25rem;
···
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--android-safe-area-top, env(safe-area-inset-top)) env(safe-area-inset-right) var(--android-safe-area-bottom, env(safe-area-inset-bottom)) env(safe-area-inset-left);
+  padding: var(--safe-area-top, 0px) var(--safe-area-right, 0px) var(--safe-area-bottom, 0px) var(--safe-area-left, 0px);
 }
 
 .image-fullscreen-img {

backend/tauri-mobile/src/App.tsx

···
 const SWIPE_THRESHOLD = 80;
 
 const EditorOverlay: React.FC<EditorOverlayProps> = ({ children, onDismiss, keyboardHeight, className = '' }) => {
-  // Use actual keyboard height when available; when keyboard is hidden, only pad for safe area
-  const effectiveKeyboardPadding = keyboardHeight > 0 ? keyboardHeight + 4 : 0;
+  const keyboardOpen = keyboardHeight > 0;
+
+  // Track visual viewport height so the overlay never extends behind the keyboard.
+  // visualViewport.height shrinks when the keyboard opens — we use it directly.
+  const [viewportHeight, setViewportHeight] = useState(() =>
+    window.visualViewport ? window.visualViewport.height : window.innerHeight
+  );
+
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const onResize = () => setViewportHeight(vv.height);
+    vv.addEventListener('resize', onResize);
+    return () => vv.removeEventListener('resize', onResize);
+  }, []);
 
   // Swipe-down-to-close state
   const [swipeOffset, setSwipeOffset] = useState(0);
···
     return () => viewport.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // On Android, the Kotlin bridge injects --android-safe-area-top via evaluateJavascript,
-  // but it may fire before the page DOM is ready (race condition). Set a sensible default
-  // so the header isn't behind the status bar while waiting for the native bridge.
-  // The Kotlin bridge will overwrite this with the exact value once it fires.
+  // Set --safe-area-top CSS variable for status bar / notch clearance.
+  // On iOS: read from env(safe-area-inset-top) via a CSS trick.
+  // On Android: Kotlin bridge overwrites with real WindowInsets value.
+  // Default 40px ensures header clears notch even if bridge is slow.
   useEffect(() => {
-    const isAndroid = /android/i.test(navigator.userAgent);
-    if (isAndroid) {
-      const root = document.documentElement;
-      // Only set default if the Kotlin bridge hasn't already provided a value
-      if (!root.style.getPropertyValue('--android-safe-area-top')) {
-        root.style.setProperty('--android-safe-area-top', '24px');
-      }
+    const root = document.documentElement;
+    if (!root.style.getPropertyValue('--safe-area-top')) {
+      root.style.setProperty('--safe-area-top', '40px');
     }
   }, []);
 
···
 
   return (
     <div
-      className={`edit-overlay ${className}`}
-      style={effectiveKeyboardPadding > 0 ? { paddingBottom: `${effectiveKeyboardPadding}px` } : undefined}
+      className={`edit-overlay ${className}${keyboardOpen ? ' keyboard-open' : ''}`}
+      style={{ height: `${viewportHeight}px` }}
       onClick={(e) => e.target === e.currentTarget && onDismiss()}
     >
       <div
···
     }
   }, []);
 
-  // Detect system dark mode via native iOS API
+  // Detect system dark mode via native API (iOS) or Android bridge
   useEffect(() => {
     const checkDarkMode = async () => {
       try {
         const nativeDark = await invoke<boolean>("is_dark_mode");
         setIsDark(nativeDark);
       } catch (error) {
-        // Fallback to JS media query
-        const jsMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        setIsDark(jsMediaQuery.matches);
+        // Check Android-injected global (set by MainActivity.kt)
+        if (typeof (window as any).__ANDROID_DARK_MODE__ === "boolean") {
+          setIsDark((window as any).__ANDROID_DARK_MODE__);
+        } else {
+          // Fallback to JS media query
+          const jsMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+          setIsDark(jsMediaQuery.matches);
+        }
       }
     };