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 = {}
) {
val cs = MaterialTheme.colorScheme
Row(
Column(
modifier = modifier
.fillMaxWidth()
.padding(vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically
) {
Box(
modifier = Modifier
.size(38.dp)
.clip(KaizenShapes.circle)
.background(cs.onBackground.copy(alpha = 0.06f)),
contentAlignment = Alignment.Center
) {
Icon(
imageVector = icon,
contentDescription = null,
tint = cs.onBackground.copy(alpha = 0.75f),
modifier = Modifier.size(18.dp)
)
Row(verticalAlignment = Alignment.CenterVertically) {
Box(
modifier = Modifier
.size(38.dp)
.clip(KaizenShapes.circle)
.background(cs.onBackground.copy(alpha = 0.06f)),
contentAlignment = Alignment.Center
) {
Icon(
imageVector = icon,
contentDescription = null,
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.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))
Spacer(Modifier.height(12.dp))
content()
}
}