From fe5e93cdfaf8ed5b67e1c54bb466677b0ca3d21a Mon Sep 17 00:00:00 2001
From: Bruno Deanoz <mrx.anonymousorg@gmail.com>
Date: Sun, 21 Jun 2026 17:46:18 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20settings=20option=20rows=20=E2=80=94=20s?=
 =?UTF-8?q?tack=20title=20above=20controls=20instead=20of=20side=20by=20si?=
 =?UTF-8?q?de?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../kaizen/app/settings/SettingsComponents.kt | 69 +++++++++----------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/app/src/main/java/dev/kaizen/app/settings/SettingsComponents.kt b/app/src/main/java/dev/kaizen/app/settings/SettingsComponents.kt
index 2828ec2..79c2034 100644
--- a/app/src/main/java/dev/kaizen/app/settings/SettingsComponents.kt
+++ b/app/src/main/java/dev/kaizen/app/settings/SettingsComponents.kt
@@ -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()
     }
 }