Column takes whole screen space

Question

I am working on a simple POC that displays a form and takes some input from the user, so far it looks like this:

The layout is declared as follow:

Column {
   Row {
      TextInput {} Space() TextInput{}
   }
   Row {
      TextInput {} Space() TextInput{}
   }
}

So far so good. Now I would like to take it one step further and add input validation, eg.: if the input is invalid then show a Text() with red color underneath the TextInput. To do this I am wrapping the individual TextInputs in a Column, like this:

Column {
   Row {
      Column {
        TextInput {}
        Text(text="invalid input")
      } 
      Space() 
      Column {
        TextInput{}
        Text(text="invalid input")
      }
   }
   // ...

However, as you can see from the screenshot below, the column takes the whole height of the screen, which is not what I would expect:

Any ideas what am I missing?

The actual code:

@Composable
fun FormView(
    buttonEnabled: Boolean,
    onInterestChanged: (String) -> Unit,
    onPrincipalChanged: (String) -> Unit,
    onLoanChanged: (String) -> Unit,
    onYearsChanged: (String) -> Unit,
    onCalculateButtonClicked: () -> Unit,
) {
    Row {
        Column {
            InputField(
                modifier = Modifier.weight(1f),
                label = "Interest %",
                onValueChanged = { interest ->
                    onInterestChanged(interest)
                }
            )
            Text(text = "Invalid number", color = Color.Red)
        }

        Spacer(modifier = Modifier.width(8.dp))
        Column {
            InputField(
                modifier = Modifier.weight(1f),
                label = "Principal %",
                onValueChanged = { principal ->
                    onPrincipalChanged(principal)
                }
            )
            Text(text = "Invalid number", color = Color.Red)
        }

    }

   // second row ...
}

@Composable
fun InputField(modifier: Modifier, label: String, onValueChanged: (String) -> Unit) {
    var value: String by rememberSaveable {
        mutableStateOf("")
    }
    OutlinedTextField(
        modifier = modifier,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        value = value,
        maxLines = 1,
        onValueChange = {
            value = it
            onValueChanged(value)
        },
        label = { Text(text = label) }
    )
}

Answer 1

OK, so this was because of the Modifier.weight(1) which was passed down to the TextInput. Adding a Column would apply the weight vertically as well.

@Composable
fun FormView(
    // ...
) {
    Row {
        Column {
            InputField(
                modifier = Modifier.weight(1f),
                ...
            )
         }
        ...
     }
}

@Composable
fun InputField(modifier: Modifier, ...) {
   
    OutlinedTextField(
        modifier = modifier,
        // ...
    )
}

To fix it, the modifier has to be applied to the Column:

// ... 
Row {
    Column(modifier = Modifier.weight(1f)) {
        InputField()
    }
}