fix: settings option rows — stack title above controls instead of side by side

SettingsOptionRow was a horizontal Row cramming icon + title + wide
controls (theme circles, appearance pills) into one line. The text
got squeezed to near-zero width, breaking character by character.
Changed to vertical layout: title/description on top, controls below.
This commit is contained in:
Bruno Deanoz 2026-06-21 17:46:18 +02:00
parent e4c6e7f763
commit fe5e93cdfa

View file

@ -107,46 +107,45 @@ fun SettingsOptionRow(
content: @Composable () -> Unit = {} content: @Composable () -> Unit = {}
) { ) {
val cs = MaterialTheme.colorScheme val cs = MaterialTheme.colorScheme
Row( Column(
modifier = modifier modifier = modifier
.fillMaxWidth() .fillMaxWidth()
.padding(vertical = 10.dp), .padding(vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically
) { ) {
Box( Row(verticalAlignment = Alignment.CenterVertically) {
modifier = Modifier Box(
.size(38.dp) modifier = Modifier
.clip(KaizenShapes.circle) .size(38.dp)
.background(cs.onBackground.copy(alpha = 0.06f)), .clip(KaizenShapes.circle)
contentAlignment = Alignment.Center .background(cs.onBackground.copy(alpha = 0.06f)),
) { contentAlignment = Alignment.Center
Icon( ) {
imageVector = icon, Icon(
contentDescription = null, imageVector = icon,
tint = cs.onBackground.copy(alpha = 0.75f), contentDescription = null,
modifier = Modifier.size(18.dp) tint = cs.onBackground.copy(alpha = 0.75f),
) modifier = Modifier.size(18.dp)
)
}
Spacer(Modifier.width(14.dp))
Column {
Text(
text = title,
color = cs.onBackground,
fontSize = 15.sp,
fontWeight = FontWeight.SemiBold
)
if (description.isNotEmpty()) {
Text(
text = description,
color = cs.onSurfaceVariant,
fontSize = 12.sp,
lineHeight = 16.sp
)
}
}
} }
Spacer(Modifier.height(12.dp))
Spacer(Modifier.width(14.dp))
Column(Modifier.weight(1f)) {
Text(
text = title,
color = cs.onBackground,
fontSize = 15.sp,
fontWeight = FontWeight.SemiBold
)
Text(
text = description,
color = cs.onSurfaceVariant,
fontSize = 12.sp,
lineHeight = 16.sp
)
}
Spacer(Modifier.width(10.dp))
content() content()
} }
} }