DropdownMenu Padding

Question

In the making of a dropdown menu in compose, I ran across a problem where my DropdownMenu will always fillMaxWidth as given in the modifier. my goal is to add padding so it will match the content of the screen, however adding padding to the modifier did not work...

@Composable
fun PriorityDropDown(
    priority: Priority,
    onPrioritySelected: (Priority) -> Unit
) {

    var expanded by remember { mutableStateOf(false) }
    val dropDownIconAngle: Float by animateFloatAsState(targetValue = if (expanded) 0f else -90f)

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colors.background)
            .height(PRIORITY_DROPDOWN_HEIGHT)
            .clickable { expanded = true }
            .border(
                width = 1.dp,
                shape = MaterialTheme.shapes.small,
                color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Canvas(
            modifier = Modifier
                .size(PRIORITY_INDICATOR_SIZE)
                .weight(1.5f),
            onDraw = {
                drawCircle(color = priority.color)
            }
        )

        Text(
            text = priority.name,
            style = MaterialTheme.typography.subtitle2,
            modifier = Modifier.weight(8f)
        )

        IconButton(
            onClick = { expanded = true },
            modifier = Modifier.weight(2f)
        ) {
            Icon(
                imageVector = Icons.Filled.ArrowDropDown,
                contentDescription = stringResource(R.string.drop_down_arrow),
                modifier = Modifier
                    .alpha(ContentAlpha.medium)
                    .rotate(dropDownIconAngle)
            )
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
        ) {
            // ...
        }
    }
}

What it's like without padding:

What it's like with hardcoding .fillMaxWidth(fraction = 0.942f)

Answer 1

adding var rowSize by remember { mutableStateOf(Size.Zero) }

to the Row modifier adding:

.onGloballyPositioned { layoutCoordinates ->
    rowSize = layoutCoordinates.size.toSize()
}

Then to the DropDown Modifier:

.width(with(LocalDensity.current) { rowSize.width.toDp() })

solved the problem

Answer 2

Based on Emek answer, you can play with the BoxWithConstrains and maxWidth:

BoxWithConstraints(
    modifier = Modifier.fillMaxWidth(),
) {
    DropdownMenu(
        expanded = true,
        onDismissRequest = { expanded = false },
        modifier = Modifier.width(with(LocalDensity.current) { maxWidth })
    ) { /* ... */ }
}