HorizontalViewPager inside another HorizontalViewPager top/bottom padding issue

I have a screen which contains a HorizontalViewPager and inside one of the tabs includes the another HorizontalViewPager. I was trying to use the accompanist:viewpager library.

I already created a ticket in their github repo but want to ask it here also just in case someone had the same issue and know the workaround.

Plus if the tickets has more participants it should be resolved faster.

Thank you for everyones help in advance!

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.pagerTabIndicatorOffset
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.launch

@OptIn(ExperimentalPagerApi::class)
@composable
fun TestCard() {
val mainPagerState = rememberPagerState()

val mainTitles = listOf(
    "First",
    "Second",
    "Third",
    "Forth",
    "Fifth"
)

val tabIndex = mainPagerState.currentPage
val coroutineScope = rememberCoroutineScope()

Column(Modifier.fillMaxSize()) {
    ScrollableTabRow(
        selectedTabIndex = tabIndex,
        edgePadding = 16.dp,
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                modifier = Modifier.pagerTabIndicatorOffset(
                    mainPagerState,
                    tabPositions
                ),
                color = MaterialTheme.colors.primary
            )
        },
        backgroundColor = Color.Transparent
    ) {
        mainTitles.forEachIndexed { index, tabTitle ->
            Tab(
                modifier = Modifier
                    .height(
                        height = 30.dp
                    ),
                selected = tabIndex == index,
                onClick = {
                    coroutineScope.launch {
                        mainPagerState.animateScrollToPage(index)
                    }
                },
                text = {
                    Text(
                        modifier = Modifier
                            .alpha(
                                alpha = if (tabIndex == index) 1f else 0.85f
                            ),
                        text = tabTitle,
                        style = MaterialTheme.typography.h6.copy(
                            fontSize = 14.sp,
                            letterSpacing = -(0.25).sp,
                            color = if (tabIndex == index) Color.Black else Color.Magenta
                        )
                    )
                }
            )
        }
    }
    HorizontalPager(
        modifier = Modifier.fillMaxSize(),
        count = mainTitles.size,
        state = mainPagerState
    ) { index ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {
            when (mainTitles[index]) {
                "First" -> {
                    for (a in 0..2) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(
                                    16.dp
                                )
                                .background(Color.Green),
                            text = mainTitles[index],
                            style = MaterialTheme.typography.h6
                        )
                    }

                    InnerHorizontalPager()
                }
                "Second" -> {
                    for (a in 0..3) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(
                                    16.dp
                                )
                                .background(Color.Green),
                            text = mainTitles[index],
                            style = MaterialTheme.typography.h6
                        )
                    }
                }
                "Third" -> {
                    for (a in 0..7) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(
                                    16.dp
                                )
                                .background(Color.Green),
                            text = mainTitles[index],
                            style = MaterialTheme.typography.h6
                        )
                    }
                }
                "Forth" -> {
                    for (a in 0..15) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(
                                    16.dp
                                )
                                .background(Color.Green),
                            text = mainTitles[index],
                            style = MaterialTheme.typography.h6
                        )
                    }
                }
                "Fifth" -> {
                    for (a in 0..3) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(
                                    16.dp
                                )
                                .background(Color.Green),
                            text = mainTitles[index],
                            style = MaterialTheme.typography.h6
                        )
                    }
                }
            }
        }
    }
}
}

@OptIn(ExperimentalPagerApi::class)
@composable
fun InnerHorizontalPager() {
val additionalTitles = listOf(
"First",
"Second",
"Third",
"Forth",
"Fifth"
)

val coroutineScope = rememberCoroutineScope()
val additionalPagerState = rememberPagerState()
val tabIndex = additionalPagerState.currentPage

ScrollableTabRow(
    selectedTabIndex = tabIndex,
    edgePadding = 16.dp,
    indicator = { tabPositions ->
        TabRowDefaults.Indicator(
            modifier = Modifier.pagerTabIndicatorOffset(
                additionalPagerState,
                tabPositions
            ),
            color = MaterialTheme.colors.primary
        )
    },
    backgroundColor = Color.Transparent
) {
    additionalTitles.forEachIndexed { index, tabTitle ->
        Tab(
            modifier = Modifier
                .height(
                    height = 30.dp
                ),
            selected = tabIndex == index,
            onClick = {
                coroutineScope.launch {
                    additionalPagerState.animateScrollToPage(index)
                }
            },
            text = {
                Text(
                    modifier = Modifier
                        .alpha(
                            alpha = if (tabIndex == index) 1f else 0.85f
                        ),
                    text = tabTitle,
                    style = MaterialTheme.typography.h6.copy(
                        fontSize = 14.sp,
                        letterSpacing = -(0.25).sp,
                        color = if (tabIndex == index) Color.Black else Color.Magenta
                    )
                )
            }
        )
    }
}

HorizontalPager(
    modifier = Modifier
        .background(Color.Blue),
    contentPadding = PaddingValues(0.dp),
    count = additionalTitles.size,
    state = additionalPagerState,
    userScrollEnabled = true
) { index ->
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        when (additionalTitles[index]) {
            "First" -> {
                for (a in 0..2) {
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(
                                16.dp
                            )
                            .background(Color.Red),
                        text = additionalTitles[index],
                        style = MaterialTheme.typography.h6
                    )
                }
            }
            "Second" -> {
                for (a in 0..3) {
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(
                                16.dp
                            )
                            .background(Color.Green),
                        text = additionalTitles[index],
                        style = MaterialTheme.typography.h6
                    )
                }
            }
            "Third" -> {
                for (a in 0..7) {
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(
                                16.dp
                            )
                            .background(Color.Green),
                        text = additionalTitles[index],
                        style = MaterialTheme.typography.h6
                    )
                }
            }
            "Forth" -> {
                for (a in 0..15) {
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(
                                16.dp
                            )
                            .background(Color.Green),
                        text = additionalTitles[index],
                        style = MaterialTheme.typography.h6
                    )
                }
            }
            "Fifth" -> {
                for (a in 0..3) {
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(
                                16.dp
                            )
                            .background(Color.Green),
                        text = additionalTitles[index],
                        style = MaterialTheme.typography.h6
                    )
                }
            }
        }
    }
}
}