feat: introduce shared minimum height for header and row cells in ListDetailScreen; simplify state management by using direct state values

CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/screens/ListDetailScreen.kt

@@ -103,6 +103,10 @@ import java.text.SimpleDateFormat
 import java.util.Calendar
 import java.util.Locale
 
+// Independent minimum heights for header and rows
+private val HeaderMinHeight = 44.dp
+private val RowMinHeight = 48.dp
+
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 @Composable
 fun ListDetailScreen(
@@ -123,9 +127,9 @@ fun ListDetailScreen(
     val items by viewModel.items.collectAsState()
     val isLoading by viewModel.isLoading.collectAsState()
 
-    // Use derivedStateOf to create stable references
+    // Use direct state values; avoid derivedStateOf without state reads (caused staleness)
-    val stableFields by remember { derivedStateOf { fields } }
+    val stableFields = fields
-    val stableItems by remember { derivedStateOf { items } }
+    val stableItems = items
     var itemToEdit by remember { mutableStateOf<ItemWithValues?>(null) }
     var showSortDialog by remember { mutableStateOf(false) }
     var showGroupDialog by remember { mutableStateOf(false) }
@@ -495,13 +499,17 @@ fun ListDetailScreen(
                             pendingScrollToBottom = false
                         }
                     }
-                    // Header: horizontally scrollable across the table width
+                    // Header: horizontally scrollable across the table width with equal-height header cells
-                    Row(
+                    val headerWidths = stableFields.map { field -> fieldWidths[field.id] ?: 150.dp }
+                    Box(
                         modifier =
                             Modifier
                                 .horizontalScroll(horizontalScrollState)
                                 .background(MaterialTheme.colorScheme.surface),
-                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        EqualHeightRow(
+                            widths = headerWidths,
+                            modifier = Modifier.fillMaxWidth(),
                         ) {
                             stableFields.forEach { field ->
                                 key(field.id) {
@@ -530,6 +538,7 @@ fun ListDetailScreen(
                                 }
                             }
                         }
+                    }
 
                     // Content area: if empty, center message; else render horizontally scrollable rows
                     when {
@@ -883,13 +892,17 @@ fun FieldHeader(
                 .border(1.dp, MaterialTheme.colorScheme.outline),
     ) {
         Surface(
-            modifier = Modifier.fillMaxWidth(),
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .heightIn(min = HeaderMinHeight),
             color = MaterialTheme.colorScheme.primaryContainer,
         ) {
             Row(
                 modifier =
                     Modifier
                         .fillMaxWidth()
+                        .heightIn(min = HeaderMinHeight)
                         .padding(12.dp),
                 horizontalArrangement = Arrangement.SpaceBetween,
                 verticalAlignment = Alignment.CenterVertically,
@@ -1005,7 +1018,7 @@ fun ItemRow(
         modifier =
             Modifier
                 .fillMaxWidth()
-                .heightIn(min = 48.dp)
+                .heightIn(min = RowMinHeight)
                 .clickable(onClick = onClick),
     ) {
         fields.forEach { field ->