From 8a23a28e542626105f8cf9d56f07a11413c24536 Mon Sep 17 00:00:00 2001
From: Kgothatso Ngako <kgothatso@machankura.com>
Date: Sun, 6 Sep 2026 13:06:28 +0200
Subject: [PATCH] fix: let the untranslated side read as text, not as a button

The translation cell was a `TextButton` with its content padding zeroed, which
took care of the padding and left everything else a button brings: Material's
pill shape, a 40dp minimum height, and a ripple rounded to match. So a chapter's
two columns -- the same text, one side not yet translated -- did not read as two
columns of one table. One was prose and the other was a control, and the thing
being offered is not a control, it is the text with an invitation to write it.

It is a plain `Row` now, laid out like the original cell beside it. The click
moves up onto the cell's `Box`, before the 12dp padding rather than inside it,
so the tap target is the whole cell rather than a button indented within it and
the ripple is the rectangle the cell already was. `TableRow` grows a
`rightModifier` to carry that, which is where a modifier for that cell belongs.

Same greyed-out placeholder, same chevron, same destination.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../ui/composable/TranslationChapterScreen.kt | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslationChapterScreen.kt b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslationChapterScreen.kt
index 2a829f6b..8d7a5e18 100644
--- a/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslationChapterScreen.kt
+++ b/composeApp/src/commonMain/kotlin/press/mantra/compose/ui/composable/TranslationChapterScreen.kt
@@ -1,5 +1,6 @@
 package press.mantra.compose.ui.composable
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -10,7 +11,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -25,7 +25,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
@@ -188,15 +187,13 @@ private fun ChunkTranslationRow(
     val translated = pair.translationChunk?.text?.takeIf { it.isNotBlank() }
     TableRow(
         left = { Text(pair.originalChunk.text) },
+        // The whole translation cell opens the chunk translation editor. When
+        // there is no translation yet, the original text is shown greyed out as
+        // a placeholder. It stays plain text, laid out like the original cell
+        // beside it, rather than a button with its own shape and padding.
+        rightModifier = Modifier.clickable(onClick = onClick),
         right = {
-            // The translation cell is a button that opens the chunk translation
-            // editor. When there is no translation yet, the original text is
-            // shown greyed out as a placeholder.
-            TextButton(
-                onClick = onClick,
-                modifier = Modifier.fillMaxWidth(),
-                contentPadding = PaddingValues(0.dp)
-            ) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
                 Text(
                     modifier = Modifier.weight(1f),
                     text = translated ?: pair.originalChunk.text,
@@ -220,13 +217,14 @@ private fun ChunkTranslationRow(
 private fun TableRow(
     left: @Composable () -> Unit,
     right: @Composable () -> Unit,
+    rightModifier: Modifier = Modifier,
 ) {
     Row(
         modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min)
     ) {
         Box(modifier = Modifier.weight(1f).padding(12.dp)) { left() }
         VerticalDivider(modifier = Modifier.fillMaxHeight())
-        Box(modifier = Modifier.weight(1f).padding(12.dp)) { right() }
+        Box(modifier = Modifier.weight(1f).then(rightModifier).padding(12.dp)) { right() }
     }
 }