From 9dc748f2d381592e83350f5a0de24eaa6e4d40d4 Mon Sep 17 00:00:00 2001 From: Kgothatso Ngako Date: Tue, 8 Sep 2026 00:57:21 +0200 Subject: [PATCH] fix: lift the eight text-field screens above the software keyboard Phase 3, third step, of docs/material-design-conformance.md. Nine screens and a dialog carry text fields. One of them called `imePadding()`; the audit had said seven screens, and was wrong about that too. `Scaffold`'s `contentWindowInsets` defaults to `systemBars`, which does **not** include the ime, so a `Scaffold` on its own does nothing about a keyboard covering the field being typed into. `Modifier.imePadding()` on the Scaffold lifts the whole screen, which is the standard shape and the one that needs no per-field handling. Eight screens get it: AddArtifact, AddChapter, AddDialect, TranslateChunk, ChatRoomCreation, CreateProfile, SignIn, WriteNewNote. Each carries a one-line comment saying why, since a bare modifier in a Scaffold argument list is the kind of thing that gets deleted in a cleanup. **ChatRoomMessagingScreen is deliberately not one of them**, and the reason is now written where somebody would look for it. Its composer already reserves its own bottom inset with `navigationBarsPadding()`. Adding `imePadding()` to the Scaffold as well would pad twice while the keyboard is up, because the ime inset already covers the navigation bar area that row is separately reserving. Getting that combination right wants a device with a keyboard open, not a compiler, and it is the one screen where the existing code shows signs of having been tuned by hand. **Not device-verified, and worth saying so plainly.** The emulator's account boots to a populated home screen, and reaching any of the eight means several hops through onboarding; what was confirmed is only that the keyboard interaction works on the path that was reachable -- the npub dialog's field moved from a bottom edge of y=1250 to y=840 with `mInputShown=true`, so ime handling is live on this build. The eight Scaffolds themselves were not each opened with a keyboard up. `ChatRoomCreationScreen`, reached through New Chat -> Start a group chat, is the shortest path for whoever checks. **Tests.** 944 pass, 595 jvm over 72 classes and 349 android over 44, unchanged. Window insets are a property of a running composition against a real window; there is no Compose UI test infrastructure here to assert them, and a test that the modifier is present would only restate the diff. Co-Authored-By: Claude Opus 5 --- .../press/mantra/compose/ui/composable/AddArtifactScreen.kt | 4 ++++ .../press/mantra/compose/ui/composable/AddChapterScreen.kt | 4 ++++ .../press/mantra/compose/ui/composable/AddDialectScreen.kt | 4 ++++ .../mantra/compose/ui/composable/ChatRoomCreationScreen.kt | 5 ++++- .../mantra/compose/ui/composable/ChatRoomMessagingScreen.kt | 6 ++++++ .../mantra/compose/ui/composable/CreateProfileScreen.kt | 5 ++++- .../press/mantra/compose/ui/composable/SignInScreen.kt | 5 ++++- .../mantra/compose/ui/composable/TranslateChunkScreen.kt | 4 ++++ .../mantra/compose/ui/composable/WriteNewNoteScreen.kt | 5 ++++- 9 files changed, 38 insertions(+), 4 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddArtifactScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddArtifactScreen.kt index 977279a6..6d39f689 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddArtifactScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddArtifactScreen.kt @@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.text.input.rememberTextFieldState import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add @@ -130,7 +131,10 @@ fun AddArtifactScreen( // other button in the app uses rather than inventing a shade here. val buttonColors = ButtonDefaults.buttonColors() + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. Scaffold( + modifier = Modifier.imePadding(), topBar = { TopAppBar( title = { diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddChapterScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddChapterScreen.kt index de1a050d..1e8e1251 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddChapterScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddChapterScreen.kt @@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.text.input.rememberTextFieldState import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack @@ -122,7 +123,10 @@ fun AddChapterScreen( // other button in the app uses rather than inventing a shade here. val buttonColors = ButtonDefaults.buttonColors() + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. Scaffold( + modifier = Modifier.imePadding(), topBar = { TopAppBar( title = { Text("Add chapter to ${addChapterUIState.artifact.name}") }, diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddDialectScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddDialectScreen.kt index 3da2a180..54a9d997 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddDialectScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/AddDialectScreen.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.text.input.rememberTextFieldState import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add @@ -104,7 +105,10 @@ fun AddDialectScreen( // other button in the app uses rather than inventing a shade here. val buttonColors = ButtonDefaults.buttonColors() + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. Scaffold( + modifier = Modifier.imePadding(), topBar = { TopAppBar( title = { diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomCreationScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomCreationScreen.kt index 10216be1..a55ac5fb 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomCreationScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomCreationScreen.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.input.TextFieldLineLimits import androidx.compose.material.icons.Icons @@ -39,7 +40,9 @@ fun ChatRoomCreationScreen( factory = ChatRoomCreationViewModel.factory() ) - Scaffold { innerPadding -> + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. + Scaffold(modifier = Modifier.imePadding()) { innerPadding -> Column( modifier = Modifier.padding(innerPadding).fillMaxWidth() ) { diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomMessagingScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomMessagingScreen.kt index fb454184..51c18a6e 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomMessagingScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/ChatRoomMessagingScreen.kt @@ -200,6 +200,12 @@ fun ChatRoomMessagingScreen( // TODO: Check that we have direct message relays for this user... + // The composer handles its own bottom inset, which is why this + // screen is the one text-field screen without `imePadding()` on its + // Scaffold. Adding it here would pad twice while the keyboard is up: + // the ime inset already covers the navigation bar area this row is + // separately reserving. Getting the combination right wants a device + // with a keyboard open, not a compiler. Column( modifier = Modifier.fillMaxWidth() .background(BottomAppBarDefaults.containerColor) diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/CreateProfileScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/CreateProfileScreen.kt index ec7bfc43..68800ef9 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/CreateProfileScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/CreateProfileScreen.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.input.TextFieldLineLimits import androidx.compose.material.icons.Icons @@ -53,7 +54,9 @@ fun CreateProfileScreen( marmotRepository = marmotRepository ) ) - Scaffold { innerPadding -> + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. + Scaffold(modifier = Modifier.imePadding()) { innerPadding -> Column( modifier = Modifier.padding(innerPadding) ) { diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SignInScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SignInScreen.kt index 7e67e7a9..a276c263 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SignInScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SignInScreen.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Create @@ -44,7 +45,9 @@ fun SignInToProfileScreen( nostrRepository ) ) - Scaffold { innerPadding -> + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. + Scaffold(modifier = Modifier.imePadding()) { innerPadding -> Column( modifier = Modifier.padding(innerPadding) ) { diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslateChunkScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslateChunkScreen.kt index 25786e73..6735f3a8 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslateChunkScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslateChunkScreen.kt @@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.input.rememberTextFieldState import androidx.compose.foundation.verticalScroll @@ -102,7 +103,10 @@ fun TranslateChunkScreen( // other button in the app uses rather than inventing a shade here. val buttonColors = ButtonDefaults.buttonColors() + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. Scaffold( + modifier = Modifier.imePadding(), topBar = { TopAppBar( title = { Text("Translate chunk") }, diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/WriteNewNoteScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/WriteNewNoteScreen.kt index a0df7861..e1601b25 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/WriteNewNoteScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/WriteNewNoteScreen.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.text.KeyboardOptions @@ -65,7 +66,9 @@ fun WriteNewNoteScreen( nostrRepository ) ) - Scaffold { innerPadding -> + // imePadding: this screen has a text field, and without it the software + // keyboard covers whatever is being typed into. + Scaffold(modifier = Modifier.imePadding()) { innerPadding -> Column( modifier = Modifier.padding(innerPadding) ) {