compose list-detail not visible in portrait mode using ListDetailPaneScaffold

Question

I am expecting the list-details view when the orientation is portrait in Foldable Phones but it shows a list only like in phones, Currently it only works when we rotate the device to landscape mode

ListDetailPaneScaffold Implementations:

        setContent {
            val uiState by viewModel.uiState.collectAsStateWithLifecycle()
            AppMaterial3Theme {
                var selectedItem: SettingDetailsScreen by rememberSaveable {
                    mutableStateOf(SettingDetailsScreen.AccountDetails)
                }
                val navigator = rememberListDetailPaneScaffoldNavigator()
                ListDetailPaneScaffold(
                    scaffoldState = navigator.scaffoldState,
                    listPane = {
                        BackHandler {
                            if (paneAdaptedValue == PaneAdaptedValue.Hidden) {
                                navigator.navigateBack()
                            } else {
                                finish()
                            }
                        }
                        SettingsEntryPointsScreen(
                            uiState = uiState
                        ) { item ->
                            selectedItem = item.detailScreen
                            navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                        }
                    },
                    detailPane = {
                        if (uiState is SettingsEntryPointUiState.SettingsDetails) {
                            SettingDetailContent { container ->
                                updateDetailFragment(
                                    selectedItem,
                                    container
                                )
                            }
                        }
                    }
                )
            }

Using the example from official doc -> Here

The expected result should be like this[Samsung's Setting App] :

Answer 1

Inspired by the answer from @Sevban Bayır, I learned that we can use different adaptive window calculations

   val navigator = rememberListDetailPaneScaffoldNavigator(
                scaffoldDirective = calculateDensePaneScaffoldDirective(
                    currentWindowAdaptiveInfo()
                )
            )

Which resolved the requirement, of course, you can customize it according to your need

Answer 2

You can override scaffoldDirective parameter of rememberListDetailPaneScaffoldNavigator() according to your needs. By default, it is implemented certain window size standards like below:

@ExperimentalMaterial3AdaptiveApi
fun calculateStandardPaneScaffoldDirective(
    windowAdaptiveInfo: WindowAdaptiveInfo,
    verticalHingePolicy: HingePolicy = HingePolicy.AvoidSeparating
): PaneScaffoldDirective {
    val maxHorizontalPartitions: Int
    val contentPadding: PaddingValues
    val verticalSpacerSize: Dp
    when (windowAdaptiveInfo.windowSizeClass.widthSizeClass) {
        WindowWidthSizeClass.Compact -> {
            maxHorizontalPartitions = 1
            contentPadding = PaddingValues(16.dp)
            verticalSpacerSize = 0.dp
        }
        WindowWidthSizeClass.Medium -> {
            maxHorizontalPartitions = 1
            contentPadding = PaddingValues(24.dp)
            verticalSpacerSize = 0.dp
        }
        else -> {
            maxHorizontalPartitions = 2
            contentPadding = PaddingValues(24.dp)
            verticalSpacerSize = 24.dp
        }
    }
    val maxVerticalPartitions: Int
    val horizontalSpacerSize: Dp

    // TODO(conradchen): Confirm the table top mode settings
    if (windowAdaptiveInfo.windowPosture.isTabletop) {
        maxVerticalPartitions = 2
        horizontalSpacerSize = 24.dp
    } else {
        maxVerticalPartitions = 1
        horizontalSpacerSize = 0.dp
    }

    return PaneScaffoldDirective(
        contentPadding,
        maxHorizontalPartitions,
        verticalSpacerSize,
        maxVerticalPartitions,
        horizontalSpacerSize,
        getExcludedVerticalBounds(windowAdaptiveInfo.windowPosture, verticalHingePolicy)
    )
}

for example i have overriden it like this:

                val navigator = rememberListDetailPaneScaffoldNavigator(
                    scaffoldDirective = PaneScaffoldDirective(
                        maxHorizontalPartitions = 2,
                        contentPadding = PaddingValues(10.dp),
                        maxVerticalPartitions = 2,
                        horizontalPartitionSpacerSize = 5.dp,
                        verticalPartitionSpacerSize = 5.dp,
                        excludedBounds = listOf()
                    )
                )

                ListDetailPaneScaffold(
                    scaffoldState = navigator.scaffoldState,
                    detailPane = {
                        Text(text = "Detail")
                    },
                    listPane = {
                        Text(text = "List")
                    }
                )

and got this: