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 <noreply@anthropic.com>
This commit is contained in:
Kgothatso Ngako
2026-09-08 00:57:21 +02:00
parent 831d1c0ad4
commit 9dc748f2d3
9 changed files with 38 additions and 4 deletions

View File

@@ -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 = {

View File

@@ -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}") },

View File

@@ -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 = {

View File

@@ -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()
) {

View File

@@ -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)

View File

@@ -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)
) {

View File

@@ -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)
) {

View File

@@ -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") },

View File

@@ -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)
) {