Repository: thunderbird/thunderbird-android
File: core/ui/compose/designsystem/src/main/kotlin/net/thunderbird/core/ui/compose/designsystem/organism/message/MessageItem.kt (Kotlin)

Code before:
            showAccountIndicator = showAccountIndicator,
            accountIndicatorColor = accountIndicatorColor,
            modifier = Modifier.align(Alignment.CenterVertically),
        ) {
            senderOrSubject()
        }
        Spacer(modifier = Modifier.weight(1f))
        MessageItemDate(
            receivedAt = receivedAt,
            modifier = Modifier.align(Alignment.CenterVertically),
        )
    }
}

@Composable
private fun MessageContent(
    preview: CharSequence,
    maxPreviewLines: Int,
    modifier: Modifier = Modifier,
    colors: MessageItemColors = MessageItemDefaults.readMessageItemColors(),
    subject: @Composable () -> Unit,
) {
    Row(modifier = modifier) {
        Column {
            SubjectText(colors.subjectColor) {
                subject()
            }
            Spacer(modifier = Modifier.height(MainTheme.spacings.half))
            PreviewText(preview = preview, maxLines = maxPreviewLines)
        }
    }
}

@Composable
private fun SenderText(
    showAccountIndicator: Boolean,
    accountIndicatorColor: Color?,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
            .wrapContentWidth()
            .defaultMinSize(
                minHeight = AccountIndicatorIcon.ACCOUNT_INDICATOR_DEFAULT_HEIGHT,
            ),
    ) {
        if (showAccountIndicator && accountIndicatorColor != null) {
            AccountIndicatorIcon(accountIndicatorColor)
        }

Review comment (suggestion):
The FlowRow should only be used when the screen size is within the small breakpoint (WindowSizeClass.Compact; we might need to create a new one called Small with the size of 350dp). You can utilize `movableContentOf` to place the same header row content inside the appropriate container based on this condition.

```suggestion
    val windowSizeInfo = getWindowSizeInfo()
    val isCompact = windowSizeInfo.screenWidthSizeClass == WindowSizeClass.Compact

    val headerRowContent =
        remember(showAccountIndicator, accountIndicatorColor, receivedAt, senderOrSubject, isCompact) {
            movableContentOf<RowScope> { scope ->
                with(scope) {
                    SenderText(
                        showAccountIndicator = showAccountIndicator,
                        accountIndicatorColor = accountIndicatorColor,
                        modifier = Modifier.align(Alignment.CenterVertically),
                    ) {
                        senderOrSubject()
                    }
                    if (!isCompact) {
                        Spacer(modifier = Modifier.weight(1f))
                    }
                    MessageItemDate(
                        receivedAt = receivedAt,
                        modifier = Modifier.align(Alignment.CenterVertically),
                    )
                }
            }
        }

    when (windowSizeInfo.screenWidthSizeClass) {
        WindowSizeClass.Compact -> FlowRow(
            verticalArrangement = Arrangement.Center,
            horizontalArrangement = Arrangement.Start,
            maxLines = 2,
            modifier = modifier
                .fillMaxWidth()
                .defaultMinSize(
                    minHeight = AccountIndicatorIcon.ACCOUNT_INDICATOR_DEFAULT_HEIGHT,
                ),
        ) {
            headerRowContent(this)
        }

        else -> Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = modifier.defaultMinSize(
                minHeight = AccountIndicatorIcon.ACCOUNT_INDICATOR_DEFAULT_HEIGHT,
            ),
        ) {
            headerRowContent(this)
        }
    }
```


Code after:
                GetHeaderRow(isCompact, headerRowContent = headerRowContent)
                MessageContent(colors = colors, preview = preview, maxPreviewLines = maxPreviewLines, subject = subject)
            }
            Spacer(modifier = Modifier.width(MainTheme.spacings.default))
            // Message controls and interaction items
            TrailingElements(
                action = action,
                hasAttachments = hasAttachments,
                modifier = Modifier.heightIn(min = MainTheme.sizes.large),
            )
        }
    }
}

@Composable
private fun GetHeaderRow(
    isCompact: Boolean,
    modifier: Modifier = Modifier,
    headerRowContent: @Composable ((RowScope) -> Unit),
) {
    if (isCompact) {
        HeaderRowCompact(modifier, headerRowContent = headerRowContent)
    } else {
        HeaderRow(modifier, headerRowContent = headerRowContent)
    }
}

@Composable
private fun MessageContent(
    preview: CharSequence,
    maxPreviewLines: Int,
    modifier: Modifier = Modifier,
    colors: MessageItemColors = MessageItemDefaults.readMessageItemColors(),
    subject: @Composable () -> Unit,
) {
    Row(modifier = modifier) {
        Column {
            SubjectText(colors.subjectColor) {
                subject()
            }
            Spacer(modifier = Modifier.height(MainTheme.spacings.half))
            PreviewText(preview = preview, maxLines = maxPreviewLines)
        }
    }
}

@Composable
private fun SenderText(
    showAccountIndicator: Boolean,
    accountIndicatorColor: Color?,
    modifier: Modifier = Modifier,