Why is my Jetpack Compose Image taking up all space in the row and hiding the text?

Here are my two previews:

@Preview(showBackground = true)
@Composable
fun RegionsTest1() {
    PromVendorsTheme {
        Row(
            horizontalArrangement = Arrangement.spacedBy(40.dp),
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .padding(4.dp)
                .fillMaxWidth()
        ) {
            FilledTonalButton(
                onClick = {
                    // TODO
                }
            ) {
                Text(
                    "See our listings",
                    maxLines = 1,
                    overflow = TextOverflow.Visible,
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun RegionsTest2() {
    val location = "Long Island"
    val state = "New York State"

    PromVendorsTheme {
        Row(
            horizontalArrangement = Arrangement.spacedBy(40.dp),
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .padding(4.dp)
                .fillMaxWidth()
        ) {
            Image(
                painterResource(R.drawable.prom_vendors_long_island),
                "Birds eye view of $location in $state",
                contentScale = ContentScale.FillWidth,
                modifier = Modifier
            )

            FilledTonalButton(
                onClick = {
                    // TODO
                }
            ) {
                Text(
                    "See our listings",
                    maxLines = 1,
                    overflow = TextOverflow.Visible,
                )
            }
        }
    }
}

And how they show up:

The text button is defined in the exact same way with absolutely no size modifiers or constraints except:

• Row: fillMaxWidth()
• Image: ContentScale.FillWidth

I even tried doing

• Text: TextOverflow.Visible
• FilledTonalButton: fillMaxWidth()

to fix it, and they changed nothing.

Here's how I want the row to behave in the end: (text gets width priority, then image takes up the rest of the width available on the screen within the padding, and height scales to maintain a 1:1 aspect ratio. (image from Figma)

And my gradle/dependency versions for any curious:

[versions]
agp = "8.7.2"
firebaseBom = "33.12.0"
kotlin = "2.0.0"
coreKtx = "1.15.0"
junit = "4.13.2"
junitVersion = "1.2.1"
espressoCore = "3.6.1"
lifecycleRuntimeKtx = "2.8.7"
activityCompose = "1.10.0"
composeBom = "2024.04.01"
googleServices = "4.4.2"
material3AdaptiveNavigationSuiteAndroid = "1.3.0-rc01"
navigationCompose = "2.7.6"

Why your image is taking space is because your image might be large which takes whole space.

You can give equal weightage to the both composable, to fill the space of row equally and tell Image to fill the whole width , if You want to maintain the aspect ratio , add that modifier after constraining the width of the image.

Image(
                painterResource(R.drawable.prom_vendors_long_island),
                "Birds eye view of $location in $state",
                contentScale = ContentScale.FillWidth,
                modifier = Modifier.weight(0.5f).aspectRatio(1f)
            )

FilledTonalButton(
    onClick = {
        // TODO
    },
    modifier = Modifier.weight(0.5f)
) {
    Text(
        "See our listings",
        maxLines = 1,
        overflow = TextOverflow.Visible,

    )
}

you can play with weight modifier as per your requirements.