Why doesn't my bottom bar item label fit properly?

Question

I made a bottom bar, but there is a problem, the label does not fit even though there is space? It doesn't happen on every screen, it only happens on some screens, such as small screens. What is the reason of this? I tried to adjust it with the modifier as much as I could, but I couldn't. Should I try another way to achieve this or something? Can you help me please.

Here are my code

   ModalBottomSheetLayout(
        sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
        sheetState = bottomSheetState,
        sheetContent = {
            FloatingActionButtonItems()
        }
    ) {
        Scaffold(
            topBar = {
                HomeTopBar(state = state, navHostController = navHostController)
            },
            bottomBar = {
                BaseBottomBar(currentDestination, navHostController, bottomSheetState)
            }) { padding ->
              
               //CONTENT  
             
             }

BaseBottomBar.kt

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BaseBottomBar(
    currentDestination: NavDestination?,
    navController: NavHostController,
    bottomSheetState: ModalBottomSheetState
) {

    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp

    val coroutineScope = rememberCoroutineScope()
    val bottomBarItemCount = 5
    val dividerLength = screenWidth / bottomBarItemCount
    val dividerColor = MaterialTheme.colors.contrastColor

    Box(
        modifier = Modifier
            .fillMaxWidth()

    ) {


        BottomNavigation {
            BottomAppBarItems.values().toList().forEach { item ->

                BottomNavigationItem(
                    modifier = Modifier
                        .wrapContentHeight()
                        .width(dividerLength)
                        .offset(y = 5.dp),
                    label = {
                        item.title?.let {
                            Text(
                                modifier = Modifier.background(Color.Yellow).width(300.dp),
                                maxLines = 1,
                                text = stringResource(id = it),
                                fontSize = 11.sp,
                                softWrap = false, // Align the title to the center,
                                textAlign = TextAlign.Center,
                            )
                        }
                    },
                    icon = {
                        item.icon?.let {
                            Icon(
                                modifier = Modifier.offset(y = 0.dp),
                                imageVector = ImageVector.vectorResource(id = it),
                                contentDescription = "Navigation Icon",
                            )
                        }
                    },
                    selected = currentDestination?.hierarchy?.any {
                        it.route == item.route
                    } == true,
                    unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
                    onClick = {
                        item.route?.let {
                            navController.navigate(it) {
                                popUpTo(navController.graph.findStartDestination().id)
                                launchSingleTop = true
                            }
                        }
                    }
                )
            }
        }

        Divider(
            modifier = Modifier
                .width(dividerLength),
            thickness = 2.dp,
            color = dividerColor
        )



        FancyCenterItem(
            modifier = Modifier
                .align(Alignment.Center),
            centerItemIcon = ImageVector.vectorResource(R.drawable.ic_bottom_bar_fab),
            contentColor = DefaultDYTColor,
            centerItemOnClick = {
                coroutineScope.launch {
                    if (bottomSheetState.isVisible)
                        bottomSheetState.hide()
                    else
                        bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)
                }
            },
            backgroundColor = Color.Transparent
        )
    }
}

@Composable
fun FancyCenterItem(
    modifier: Modifier,
    centerItemIcon: ImageVector,
    contentColor: Color,
    backgroundColor: Color,
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(0.dp, 0.dp),
    centerItemOnClick: () -> Unit
) {

    FloatingActionButton(
        modifier = modifier,
        onClick = (centerItemOnClick),
        backgroundColor = backgroundColor,
        contentColor = contentColor,
        elevation = elevation
    ) {
        Icon(
            imageVector = centerItemIcon,
            contentDescription = "fab button"
        )
    }
}

BottomAppBarItems.kt

enum class BottomAppBarItems(
    val icon: Int?,
    val title: String?,
    val route: String?
) {
    HOME(
        route = BottomBarScreen.HomeScreen.route,
        title = "main page",
        icon = R.drawable.ic_bottom_bar_home_light_theme
    ),
    SEARCH(
        route = BottomBarScreen.ContentScreen.route,
        title = "search",
        icon = R.drawable.ic_search
    ),
    FAB(
        route = null,
        title = null,
        icon = null
    ),
    HEALTH(
        route = BottomBarScreen.PlansScreen.route,
        title = "health",
        icon = R.drawable.ic_apple
    ),
    OTHERS(
        route = BottomBarScreen.DietitiansScreen.route,
        title = "others",
        icon = R.drawable.ic_others
    )
}

pixel 3.2

pixel 4

pixel XL