Why LazyColumn always seems not showing part of the custom layout view from left and right side?

Question

I have code below which I experiment with LazyColumn and Column on CustomLayoutModifier on Text (or can be on anything).

@Composable
fun Greeting() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text("Normal Column")
        Column(
            verticalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier
                .width(150.dp)
                .height(128.dp)
                .background(Color.Yellow)
        ) {
            Spacer(Modifier.height(16.dp))
            CustomLayoutText()
        }
        Text("Lazy Column")
        LazyColumn(
            verticalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier
                .width(150.dp)
                .height(128.dp)
                .background(Color.Yellow)
        ) {
            item {
                Spacer(Modifier.height(16.dp))
            }
            item {
                CustomLayoutText()
            }
        }
    }
}

@Composable
private fun CustomLayoutText() {
    Text("Hello This is a Long text that should fit well",
        modifier = Modifier
            .height(20.dp)
            .layout { measurable, constraints ->
                val placeable =
                    measurable.measure(constraints.offset(180.dp.roundToPx()))
                layout(
                    placeable.width, placeable.height
                ) { placeable.place(0, 0) }
            }
            .background(Color.Gray)
    )
}

Both LazyColumn and Column I have are identical in modifier and arrangement. However, the LazyColumn, you'll notice it will truncate away the left and the right most of the Text. Note: I experiment with different constraint offsets value, the truncation on thee LazyColumn always happens 60.dp on from the left and the right!

As you can see in the captured image below

If I use Inspector Layout to check the view hierarchy, I can still see the Text (for both Column and LazyColumn) at full length. However, part of the Text (for LazyColumn) is not visible somehow.

Answer 1

If I enter the text longer, looks like the Column also finally cut out. Thought the text seems not truncated, but rather wrapped.

It does look like the length of the Column/LazyColumn is restricted.

To avoid it being restricted, one can either use .wrapContentWidth(unbounded = true) on the modifier for either Column/LazyColumn (thanks to Bach.V for the pointer)

modifier = Modifier
    .width(150.dp)
    .height(128.dp)
    .background(Color.Yellow)
    .wrapContentWidth(unbounded = true)

Looking at the internal code, it seems that sets the Width constraint to Max. This means we can also manually use Layout to set the constraint as below

modifier = Modifier
    .width(150.dp)
    .height(128.dp)
    .background(Color.Yellow)
    .layout { measurable, constraints ->
        val placeable = measurable.measure(constraints.copy(maxWidth = Int.MAX_VALUE))
        layout(
            width = constraints.maxWidth,
            height = constraints.maxHeight
        ) { placeable.place((constraints.maxWidth - placeable.width)/2, 0) }
    }