In compose we have an option for intrinsics height...

# compose

[Mahmoo]

In compose we have an option for intrinsics height (for rows) and width(for column)
I've a design in which the height of image should be from intrinsics but width should be set from aspect ratio
something like this ⬇️(in thread)

[Mahmoo]

Screenshot 2025-06-12 at 03.20.25.png

[Mahmoo]

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun StoreItemDemo(
    rank: String,
    storeImage: String?,
    storeName: String,
    storeDistanceText: String,
    storeLandmarkText: String,
    latitude: Double?,
    longitude: Double?,
    isSelected: Boolean,
    onSelected: () -> Unit,
    onDirectionsClick: (Double?, Double?) -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(8))
            .background(Color.White)
            .clickable(onClick = onSelected)
            .then(
                if (isSelected) {
                    Modifier.border(2.dp, Color(0xFF6200EE), RoundedCornerShape(8))
                } else {
                    Modifier.border(
                        width = 1.dp,
                        color = Color(0xFFE0E0E0),
                        shape = RoundedCornerShape(8),
                    )
                }
            )
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            modifier = Modifier.height(IntrinsicSize.Min),
        ) {
            Box(
                modifier = Modifier
                    .fillMaxHeight()
                    .aspectRatio(1f)
            ) {
                GlideImage(
                    model = storeImage,
                    contentDescription = "Store Image",
                    contentScale = ContentScale.Crop,
                    failure = placeholder {
                        StoreError(
                            modifier = Modifier
                                .fillMaxSize()
                                .background(Color(0xFFF0F0F0))
                        )
                    },
                    modifier = Modifier
                        .fillMaxHeight()
                        .aspectRatio(1f)
                        .clip(RoundedCornerShape(topStart = 10.dp, bottomStart = 10.dp))
                        .background(Color(0xFFD6D6D6)),
                )

                Box(
                    modifier = Modifier
                        .align(Alignment.TopStart)
                        .padding(10.dp)
                        .background(
                            color = Color(0xFFFF7043),
                            shape = CircleShape,
                        )
                        .size(20.dp)
                        .border(2.dp, Color.White, CircleShape),
                    contentAlignment = Alignment.Center,
                ) {
                    Text(
                        text = rank,
                        color = Color.White,
                        fontSize = 12.sp,
                        fontWeight = FontWeight.Bold,
                    )
                }
            }

            Column(
                modifier = Modifier
                    .padding(vertical = 12.dp)
                    .weight(1f)
            ) {
                Text(
                    text = storeName,
                    color = Color(0xFF333333),
                    style = MaterialTheme.typography.subtitle1,
                    modifier = Modifier.fillMaxWidth(),
                )

                if (storeDistanceText.isNotBlank()) {
                    Text(
                        text = storeDistanceText,
                        color = Color.Gray,
                        style = MaterialTheme.typography.body2,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(top = 4.dp),
                    )
                }

                if (storeLandmarkText.isNotBlank()) {
                    Text(
                        text = storeLandmarkText,
                        color = Color.Gray,
                        style = MaterialTheme.typography.body2,
                        modifier = Modifier.fillMaxWidth(),
                    )
                }

                Row(
                    horizontalArrangement = Arrangement.spacedBy(8.dp),
                    modifier = Modifier
                        .padding(top = 8.dp)
                        .border(1.dp, Color(0xFFE0E0E0), RoundedCornerShape(5))
                        .padding(horizontal = 10.dp, vertical = 6.dp)
                        .clip(RoundedCornerShape(5))
                        .clickable { onDirectionsClick(latitude, longitude) },
                ) {
                    Icon(
                        imageVector = ImageVector.vectorResource(R.drawable.ic_direction),
                        contentDescription = "Direction Icon",
                        tint = Color(0xFFBDBDBD),
                        modifier = Modifier.size(16.dp),
                    )

                    Text(
                        text = "Directions",
                        color = Color(0xFFBDBDBD),
                        style = MaterialTheme.typography.body2,
                    )
                }
            }

            if (isSelected) {
                Icon(
                    imageVector = Icons.Rounded.CheckCircle,
                    tint = Color(0xFF6200EE),
                    contentDescription = "Selected",
                    modifier = Modifier
                        .padding(10.dp)
                        .size(24.dp),
                )
            } else {
                Box(
                    modifier = Modifier
                        .padding(10.dp)
                        .size(24.dp)
                        .border(1.dp, Color.Gray, CircleShape)
                )
            }
        }
    }
}

when the image actually loads, it fills up most up of the width of the row.

[Mahmoo]

for error case, it appears fine but for the case when iamgfe actually loads this fills up the entire width(almost)

[Mahmoo]

this is because GlideImage actually doesnt respects bounds hwne there are no specified restriction to width and height. any way by which we can fix this?

[Mahmoo]

@Stylianos Gakis can you share any input?