Bradleycorn
03/27/2026, 3:34 PMRow that includes a Surface with some content, and then a SecondaryScrollableTabRow.
Without any special modifiers, the tab row works correctly, but the Surface isn't tall enough to fill the Row (first screen show below).
So, I added a height modifier to the containing Row and set it to IntrinsicSize.Max , and set the Surface to fillMaxHeight().
Now the surface fills the height correctly, but the Tab Row stops working right. When you click tabs, the Indicator disappears (second screenshot below).
Has anyone else run into this issue before?
(Code posted in the 🧵 )Bradleycorn
03/27/2026, 3:36 PM@Composable
private fun ModifierBar(
wagerBarState: WagerBarState,
onBetTypeCleared: () -> Unit,
onModifierSelected: (BetModifier) -> Unit
) {
val selectedBetType = wagerBarState.selectedBetType ?: return
val modifiers = selectedBetType.modifiers
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.height(IntrinsicSize.Max)
) {
Surface(
color = MaterialTheme.colorScheme.primary,
modifier = Modifier.fillMaxHeight()
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.clickable { onBetTypeCleared() }
.padding(horizontal = 12.dp, vertical = 8.dp)
) {
Icon(
painter = painterResource(CdiIcons.ArrowBack),
contentDescription = "Back to bet types"
)
Text(
text = selectedBetType.betType.abbreviation,
modifier = Modifier.padding(start = 4.dp)
)
}
}
SecondaryScrollableTabRow(
selectedTabIndex = wagerBarState.selectedModifierIndex,
edgePadding = 0.dp,
containerColor = TabRowDefaults.affiliateContainerColor,
contentColor = TabRowDefaults.affiliateContentColor,
divider = {}
) {
modifiers.forEachIndexed { index, modifier ->
Tab(
selected = index == wagerBarState.selectedModifierIndex,
onClick = { onModifierSelected(modifier) },
text = { Text(modifier.displayName) }
)
}
}
}
}Bradleycorn
03/27/2026, 3:37 PM