I am making an app for the Wear OS using Jetpack Compose. I want the UI to look somewhat like this:

This is the code that I have now:

@Composable
fun DefaultPreview() {
    TimeText()
    ScalingLazyColumn(
        Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        item {
            Text(
                text = "Title",
                style = MaterialTheme.typography.title1,
                color = MaterialTheme.colors.primary
            )
        }
        item {
            Text(
                text = "Caption",
                style = MaterialTheme.typography.caption1,
                color = MaterialTheme.colors.primary
            )
        }
        item {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text(text = "Text content")
                repeat(10) { Text("Line $it") }
            }
        }
    }
}

The problem that I have with this is that when I scroll the list, the text comes underneath the TimeText which doesn’t really look that good.

So I want to make the TimeText scroll along with the other text elements. If I put the TimeText() as an item in the ScalingLazyColumn, then it does work, but now there’s a huge empty gap below the TimeText which is apparently a CurvedLayout.

How do I get rid of this empty space? Is there a better way to make the TimeText scrollable?