I’m currently working on a Composable function that creates a scrollable tab. However, I’ve encountered an issue where the size of the items within the Scrollable Tab decreases when the system font size is set to small. This issue is particularly noticeable on certain devices, resulting in a significant amount of unused space at the right end of the tab.

I attempted to resolve this by adding weight inside the tab, but this approach was unsuccessful. I’m looking for a solution that would allow me to effectively utilize the free space that appears when the system font size is small.

@Composable
@OptIn(ExperimentalFoundationApi::class)
fun CustomPager(
    modifier: Modifier = Modifier.fillMaxWidth(),
    data: List<TitleWithContent>,
    pagerState: PagerState,
    indicatorColor: Color
) {
    val coroutineScope = rememberCoroutineScope()
    val mPagerState = pagerState

    Column(
        modifier = modifier.fillMaxSize()
    ) {
            ScrollableTabRow(
                edgePadding = 0.dp,
                modifier = Modifier.fillMaxWidth(),
                selectedTabIndex = mPagerState.currentPage,
                indicator = { tabPositions ->
                    if (mPagerState.currentPage < tabPositions.size) {
                        TabRowDefaults.Indicator(
                            Modifier.tabIndicatorOffset(tabPositions[mPagerState.currentPage]),
                            color = indicatorColor
                        )
                    }
                }) {
                AddTabs(coroutineScope, mPagerState, pagerData)
            }
        

        HorizontalPager(
            state = mPagerState,
        ) { index ->
            pagerData[index].content()
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AddTabs(
    coroutineScope: CoroutineScope,
    pagerState: PagerState,
    contentWithTitleList: List<TitleWithContent>,
    selectedContentColor: Color = ColorDark,
    unselectedContentColor: Color = ColorGray,
) {
    contentWithTitleList.forEachIndexed { index, page ->
        Tab(
            selected = pagerState.currentPage == index,
            onClick = { coroutineScope.launch { pagerState.scrollToPage(index) } },
            text = {
                Text(
                    text = page.title,
                    style = if (pagerState.currentPage == index) AppTypography.current.selectedTabTitle else AppTypography.current.unselectedTabTitle
                )
            },
            selectedContentColor = selectedContentColor,
            unselectedContentColor = unselectedContentColor
        )
    }
}

data class TitleWithContent(
    var title: String,
    val content: @Composable () -> Unit
)