Repository: android/compose-samples
File: JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt (Kotlin)

Code before:
 * @param onToggle (event) toggle selection for topic
 */
@Composable
private fun TopicItem(
    itemTitle: String,
    selected: Boolean,
    onToggle: () -> Unit,
    modifier: Modifier = Modifier
) {
    val image = painterResource(R.drawable.placeholder_1_1)
    Row(
        modifier = modifier
            .toggleable(
                value = selected,
                onValueChange = { onToggle() }
            )
            .padding(horizontal = 16.dp)
    ) {
        Image(
            painter = image,
            contentDescription = null, // decorative
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .size(56.dp, 56.dp)
                .clip(RoundedCornerShape(4.dp))
        )
        Text(
            text = itemTitle,
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .padding(16.dp)
                .weight(1f), // Break line if the title is too long
            style = MaterialTheme.typography.subtitle1
        )
        Spacer(Modifier.weight(0.01f))
        SelectTopicButton(
            modifier = Modifier.align(Alignment.CenterVertically),
            selected = selected
        )
    }
}

/**
 * Full-width divider for topics
 */
@Composable
private fun TopicDivider(modifier: Modifier = Modifier) {
    Divider(
        modifier = modifier.padding(start = 90.dp, top = 8.dp, bottom = 8.dp),
        color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f)
    )

Review comment (suggestion):
Just one comment here: since this `maxWidth` is in a nested component, the size classes will be slightly off from the size classes at the root level since the entire screen isn't available at this point.

For making "root-level" type decisions, having a composition local seems like it might be the way to go...

Code after:
        )
    }
}

/**
 * Full-width divider for topics
 */
@Composable
private fun TopicDivider(modifier: Modifier = Modifier) {
    Divider(
        modifier = modifier.padding(start = 90.dp, top = 8.dp, bottom = 8.dp),
        color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f)
    )
}

/**
 * TabRow for the InterestsScreen
 */
@Composable
private fun InterestsTabRow(
    selectedTabIndex: Int,
    updateSection: (Sections) -> Unit,
    tabContent: List<TabContent>
) {
    BoxWithConstraints {
        val windowSize = remember(maxWidth) { getWindowSize(maxWidth) }
        when (windowSize) {
            WindowSize.Compact -> {
                TabRow(
                    selectedTabIndex = selectedTabIndex,
                    backgroundColor = MaterialTheme.colors.onPrimary,
                    contentColor = MaterialTheme.colors.primary
                ) {
                    InterestsTabRowContent(selectedTabIndex, updateSection, tabContent)
                }
            }
            WindowSize.Medium, WindowSize.Expanded -> {
                ScrollableTabRow(
                    selectedTabIndex = selectedTabIndex,
                    backgroundColor = MaterialTheme.colors.onPrimary,
                    contentColor = MaterialTheme.colors.primary,
                    edgePadding = 0.dp
                ) {
                    InterestsTabRowContent(
                        selectedTabIndex = selectedTabIndex,
                        updateSection = updateSection,
                        tabContent = tabContent,
                        modifier = Modifier.padding(horizontal = 8.dp)
                    )
                }
            }