ui(overview): Center the case charges line in the battery card

The line sat at a fixed 36.dp start indent, which put its left edge under
the case percentage label (28.dp icon + 8.dp spacer). That follows the M3
"supporting text aligns with the item's text column" convention, but the
case row is not a list item, and the sentence runs nearly full width, so
the lone left gutter read as an accident rather than an alignment.

Centering on the capsule instead would have been the other candidate, but
the capsule is weight(1f) between the percentage label and the status-chip
FlowRow, so its x-offset and width are both runtime values that vary with
locale and font scale. No static padding reaches it; it would take
onGloballyPositioned or a custom Layout, which is not worth it for a
caption. Centering in the surface is stable and needs neither.
This commit is contained in:
darken
2026-08-30 08:12:15 +02:00
parent 865a609203
commit 0bf6bf7b5f
@@ -46,6 +46,7 @@ import androidx.compose.ui.res.pluralStringResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import eu.darken.capod.R
@@ -493,8 +494,7 @@ private fun CaseRow(
if (charges != null) {
CaseChargesLine(
charges = charges,
// Aligned under the percentage, past the case icon and its spacer.
modifier = Modifier.padding(start = 36.dp, top = 2.dp),
modifier = Modifier.padding(top = 2.dp),
)
}
}
@@ -542,7 +542,10 @@ private fun CaseChargesLine(
text = text,
style = MaterialTheme.typography.bodySmall,
color = color,
modifier = modifier.semantics { stateDescription = state },
textAlign = TextAlign.Center,
modifier = modifier
.fillMaxWidth()
.semantics { stateDescription = state },
)
}