feat: add content alignment options using Material 3 SegmentedButton in EditFieldDialog

CollabTableAndroid/README.md

@@ -92,6 +92,9 @@ app/src/main/java/com/collabtable/app/
 2. Fill in values for each field
 3. Values are saved automatically as you type
 
+### Column Content Alignment
+In the Edit Column dialog you can choose how each column's cell content is aligned (Left, Center, Right) via a single connected Material 3 segmented button group. The selection persists per list/field and updates immediately when you save changes. To adjust later, open the Manage Columns dialog or edit the field again.
+
 ### Deleting
 - Tap the delete icon next to any table, field, or item
 - Confirm the deletion

CollabTableAndroid/app/build.gradle

@@ -60,7 +60,8 @@ dependencies {
     implementation 'androidx.compose.ui:ui'
     implementation 'androidx.compose.ui:ui-graphics'
     implementation 'androidx.compose.ui:ui-tooling-preview'
-    implementation 'androidx.compose.material3:material3:1.1.2'
+    // Use BOM-managed Material3 to access SegmentedButton (connected button group) API
+    implementation 'androidx.compose.material3:material3'
     implementation 'androidx.compose.material:material-icons-extended'
     implementation 'androidx.navigation:navigation-compose:2.7.5'
     

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

@@ -937,20 +937,6 @@ fun FieldHeader(
                     )
                 }
 
-                // Alignment segmented control (single-select)
-                Row(
-                    horizontalArrangement = Arrangement.spacedBy(4.dp),
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    val opts = listOf("start" to "L", "center" to "C", "end" to "R")
-                    opts.forEach { (value, label) ->
-                        FilterChip(
-                            selected = alignment == value,
-                            onClick = { onAlignmentChange(value) },
-                            label = { Text(label) },
-                        )
-                    }
-                }
             }
         }
     }
@@ -2016,19 +2002,20 @@ fun EditFieldDialog(
                     }
                 }
 
-                // Content alignment (single-select) using FilterChips to support current Material3 version
+                // Content alignment (single-select) using a connected Material3 SegmentedButton group
                 Text(
                     text = "Content Alignment",
                     style = MaterialTheme.typography.titleSmall,
                 )
-                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                val alignmentOptions = listOf("start" to "Left", "center" to "Center", "end" to "Right")
-                    val opts = listOf("start" to "Left", "center" to "Center", "end" to "Right")
+                SingleChoiceSegmentedButtonRow(modifier = Modifier.padding(top = 4.dp)) {
-                    opts.forEach { (value, label) ->
+                    alignmentOptions.forEachIndexed { index, (value, label) ->
-                        FilterChip(
+                        SegmentedButton(
                             selected = selectedAlignment == value,
                             onClick = { selectedAlignment = value },
+                            shape = SegmentedButtonDefaults.itemShape(index = index, count = alignmentOptions.size),
+                            icon = { if (selectedAlignment == value) Icon(Icons.Default.Check, contentDescription = null) },
                             label = { Text(label) },
-                            leadingIcon = if (selectedAlignment == value) { { Icon(Icons.Default.Check, contentDescription = null) } } else null,
                         )
                     }
                 }