From e95ece90275838cf32042f24552bdc41be85d7eb Mon Sep 17 00:00:00 2001 From: Kgothatso Ngako Date: Tue, 8 Sep 2026 07:34:55 +0200 Subject: [PATCH] fix: give form helper text and the review list the leading edge of what they describe Phase 6, step 5, second half: the plan asked to revisit the 91 `TextAlign.Center` uses, on the grounds that start alignment is what gives the rulers something to align to. Revisited, and 84 of them are right. Centring is correct for a block that is the only thing on the screen, because there is nothing for it to align to: an empty state, a loading or error message, one of the six onboarding status screens, a "coming soon" placeholder, the landing screen's hero, a dialog's title. Converting those would have been a restyle wearing a conformance argument. Seven were wrong, and they share one shape -- text sitting in a column *beside a full-width element*, so there was a leading edge and it was being ignored: - the two helper lines under `CreateProfileScreen`'s name and bio fields, and the two under `ChatRoomCreationScreen`'s. Each `TextField` is `fillMaxWidth()`, and its label, placeholder, leading icon and supporting text all begin at the same edge; the sentence explaining the field floated centred at whatever width it happened to be; - `SelectChatRoomTypeScreen`'s "this decides who can change the group later", which sits directly above three full-width cards; - `CreateProfileScreen`'s confirmation list, where "Name" and the name below it were each centred at their own width, so the label and the value it labels started in different places. Five texts there now share one edge. The parent columns are still `Alignment.CenterHorizontally`, which is why each of these needed `fillMaxWidth()` and not merely the removal of `textAlign`: a `Text` without a width in a centred column is centred as a box, so dropping the text alignment alone would have changed nothing visible. Nothing else in the sweep moves. The remaining 84 are listed above by category rather than site because the category is the reason. Co-Authored-By: Claude Opus 5 --- .../ui/composable/ChatRoomCreationScreen.kt | 9 ++++--- .../ui/composable/CreateProfileScreen.kt | 24 +++++++++++-------- .../ui/composable/SelectChatRoomTypeScreen.kt | 1 - 3 files changed, 18 insertions(+), 16 deletions(-) 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 8486c033..283595bb 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 @@ -22,7 +22,6 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.KeyboardType -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel @@ -105,9 +104,9 @@ fun ChatRoomCreationScreen( ) Text( + modifier = Modifier.fillMaxWidth(), text = stringResource(Res.string.this_will_be_the_display_name_for_this_chat), - style = MaterialTheme.typography.labelMedium, - textAlign = TextAlign.Center + style = MaterialTheme.typography.labelMedium ) TextField( @@ -150,9 +149,9 @@ fun ChatRoomCreationScreen( ) Text( + modifier = Modifier.fillMaxWidth(), text = stringResource(Res.string.this_will_be_shown_when_people_open_the_chat), - style = MaterialTheme.typography.labelMedium, - textAlign = TextAlign.Center + style = MaterialTheme.typography.labelMedium ) 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 1db826bb..f6dfb233 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 @@ -181,9 +181,9 @@ fun CreateProfileScreen( ) Text( + modifier = Modifier.fillMaxWidth(), text = stringResource(Res.string.this_will_be_the_display_name_for_your), - style = MaterialTheme.typography.labelMedium, - textAlign = TextAlign.Center + style = MaterialTheme.typography.labelMedium ) TextField( @@ -226,9 +226,9 @@ fun CreateProfileScreen( ) Text( + modifier = Modifier.fillMaxWidth(), text = stringResource(Res.string.this_will_be_shown_when_people_open_your), - style = MaterialTheme.typography.labelMedium, - textAlign = TextAlign.Center + style = MaterialTheme.typography.labelMedium ) Button( @@ -255,31 +255,35 @@ fun CreateProfileScreen( } is CreateProfileUIState.ConfirmInput -> { + // A label/value list, so every one of the five is full width and + // starts at the same edge. Centred, each floated at its own width + // and "Name" began somewhere other than the name under it. Text( + modifier = Modifier.fillMaxWidth(), text = stringResource(Res.string.name), style = MaterialTheme.typography.labelLarge ) Text( + modifier = Modifier.fillMaxWidth(), text = createAccountUIState.name, - style = MaterialTheme.typography.bodyLarge, - textAlign = TextAlign.Center + style = MaterialTheme.typography.bodyLarge ) Text( + modifier = Modifier.fillMaxWidth(), text = stringResource(Res.string.bio), style = MaterialTheme.typography.labelLarge ) Text( + modifier = Modifier.fillMaxWidth(), text = createAccountUIState.bio, - style = MaterialTheme.typography.bodyLarge, - textAlign = TextAlign.Center + style = MaterialTheme.typography.bodyLarge ) - - Text( + modifier = Modifier.fillMaxWidth(), text = stringResource(Res.string.the_above_will_be_your_profile), style = MaterialTheme.typography.bodySmall ) diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SelectChatRoomTypeScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SelectChatRoomTypeScreen.kt index ed937b78..eb847160 100644 --- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SelectChatRoomTypeScreen.kt +++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/SelectChatRoomTypeScreen.kt @@ -231,7 +231,6 @@ fun SelectChatRoomTypeScreen( Text( text = stringResource(Res.string.this_decides_who_can_change_the_group_later), style = MaterialTheme.typography.labelMedium, - textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth().padding(horizontal = MaterialTheme.spacing.space125) )