Bring both platforms onto a shared design system, then adopt native chrome and motion on Android

composeApp/src/main/kotlin/com/github/worn/App.kt

@@ -4,8 +4,11 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -24,7 +27,6 @@ import com.github.worn.ui.screen.OutfitsScreen
 import com.github.worn.ui.screen.SettingsScreen
 import com.github.worn.ui.screen.TryItScreen
 import com.github.worn.ui.screen.WardrobeScreen
-import com.github.worn.ui.theme.WornColors
 import com.github.worn.ui.theme.WornTheme
 import com.github.worn.ui.util.SharedPhoto
 import com.github.worn.ui.util.ShortcutCommand
@@ -72,16 +74,32 @@ fun App(
             }
         }
 
-        Box(
+        // Scaffold rather than a Box overlay: it measures the bar and hands the pager a bottom
+        // inset that already accounts for it, which is what lets every screen drop the hardcoded
+        // 95dp clearance they each used to subtract by hand.
+        Scaffold(
+            containerColor = MaterialTheme.colorScheme.surface,
+            bottomBar = {
+                WornBottomBar(
+                    activeTab = tabs[pagerState.currentPage],
+                    onTabSelected = onTabSelected,
+                    isCompact = isCompact,
+                )
+            },
             modifier = Modifier
                 .fillMaxSize()
-                .background(WornColors.BgPage)
                 .semantics { testTagsAsResourceId = true },
-        ) {
+        ) { innerPadding ->
             HorizontalPager(
                 state = pagerState,
                 beyondViewportPageCount = 1,
-                modifier = Modifier.fillMaxSize(),
+                // Bottom padding only. This Scaffold exists for the bottom bar; each screen owns
+                // its own top inset through its TopAppBar, and consuming innerPadding wholesale
+                // applied the status-bar inset twice — which showed up as a ~90dp dead band above
+                // every title that no app-bar height parameter could explain.
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(bottom = innerPadding.calculateBottomPadding()),
             ) { page ->
                 when (tabs[page]) {
                     Tab.WARDROBE -> WardrobeScreen(
@@ -99,13 +117,7 @@ fun App(
                     Tab.SETTINGS -> SettingsScreen(onTabSelected = onTabSelected)
                 }
             }
-
-            WornBottomBar(
-                activeTab = tabs[pagerState.currentPage],
-                onTabSelected = onTabSelected,
-                isCompact = isCompact,
-                modifier = Modifier.align(Alignment.BottomCenter).fillMaxWidth(),
-            )
         }
     }
 }
+

composeApp/src/main/kotlin/com/github/worn/MainActivity.kt

@@ -1,10 +1,12 @@
 package com.github.worn
 
 import android.content.Intent
+import android.graphics.Color
 import android.net.Uri
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.activity.SystemBarStyle
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -27,7 +29,13 @@ class MainActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         installSplashScreen()
-        enableEdgeToEdge()
+        // Transparent bars with `auto` styles: the system picks light or dark bar icons from the
+        // current uiMode, so status-bar glyphs stay legible in both themes. The default overload
+        // assumes a light scrim and would leave dark icons on the dark page.
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT),
+            navigationBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT),
+        )
         super.onCreate(savedInstanceState)
 
         handleIntent(intent)