Aligning a resized TextField in Jetpack Compose

Question

I am having problem aligning a resized TextField in Jetpack Compose for Desktop. When I resize the width of the TextField, the TextField automatically adjust itself to center position on screen. I have tried using Modify.Align and it did not work.

Can someone help? Here is my code

@Composable
fun addSales(sales: Sales,
             actionChangeSales: (sales: Sales) -> Unit,
             actionQuantityInc: (() -> Unit),
             actionItemNameInc: (() -> Unit)){
    Column{
        TextField(
            value = sales.itemName,
            textStyle = TextStyle(color = Color.DarkGray),
            onValueChange = {
                actionChangeSales(Sales(itemName = it))
                actionItemNameInc.invoke()
            },
            label = { Text("Item name")}
        )

        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = roundQuantity(sales.quantitySold),
            textStyle = TextStyle(color = Color.DarkGray),
            onValueChange = {
                actionChangeSales(Sales(quantitySold = getDoubleFromEditText(it)))
                actionQuantityInc.invoke()
            },
            label = { Text("Quantity")},
            modifier = Modifier.width(120.dp)
        )
    }
}

Answer 1

As a workaround, try to wrap OutlinedTextField with Box and apply the width modifier there:

            Box(modifier = Modifier.width(120.dp)) {
                OutlinedTextField(
                    value = "123456789",
                    textStyle = TextStyle(color = Color.DarkGray),
                    onValueChange = {},
                    label = { Text("Quantity") },
                )
            }