In my compose screen that I'm passing to xml fragment.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val activity = requireActivity() as CoreMainActivity
    composeView.setContent {
      LanguageScreen(
        languageViewModel = languageViewModel
      )
    }
  }

I have a jetpack compose top app bar in scaffold and have text field in title like this

Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = {
      SearchTopAppBar(
        title = "My App",
        onSearchClick = { isSearchActive = true },
        onBackClick = {
          if (isSearchActive) {
            isSearchActive = false
            searchText = ""
          }
        },
        isSearchActive = isSearchActive,
        searchText = searchText,
        onSearchTextChanged = { searchText = it },
        onSearchTextSubmit = {
          // Handle search submit
        }
      )
    }
  ) { innerPadding ->
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchTopAppBar(
    title: String,
    onSearchClick: () -> Unit,
    onBackClick: () -> Unit,
    isSearchActive: Boolean,
    searchText: String,
    onSearchTextChanged: (String) -> Unit,
    onSearchTextSubmit: () -> Unit
) {
    TopAppBar(
        title = {
            if (isSearchActive) {
                TextField(
                    value = searchText,
                    onValueChange = onSearchTextChanged,
                    modifier = Modifier.fillMaxWidth(),
                    placeholder = { Text("Search...") },
                    singleLine = true,
                    colors = TextFieldDefaults.colors(
                        focusedIndicatorColor = Color.Transparent,
                        unfocusedIndicatorColor = Color.Transparent,
                        disabledIndicatorColor = Color.Transparent,
                        focusedContainerColor = Color.Transparent,
                        unfocusedContainerColor = Color.Transparent
                    ),
                    keyboardOptions = KeyboardOptions(
                        imeAction = ImeAction.Search
                    ),
                    keyboardActions = KeyboardActions(
                        onSearch = { onSearchTextSubmit() }
                    )
                )
            } else {
                Text(text = title)
            }
        },
        navigationIcon = {
            IconButton(onClick = onBackClick) {
                Icon(
                    imageVector = if (isSearchActive) Icons.Default.ArrowBack else Icons.Default.Close,
                    contentDescription = "Back"
                )
            }
        },
        actions = {
            if (!isSearchActive) {
                IconButton(onClick = onSearchClick) {
                    Icon(
                        imageVector = Icons.Default.Search,
                        contentDescription = "Search"
                    )
                }
            }
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primary,
            titleContentColor = MaterialTheme.colorScheme.onPrimary,
            navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
            actionIconContentColor = MaterialTheme.colorScheme.onPrimary
        )
    )
}

now There's one problem my title bar is fine as long as i don't open the the keyboard from the text field. when the keyboard gets open it shifts the whole top app bar down. how can i prevent it from happening.

so far I've tried adding

Scaffold(
    modifier = Modifier
        .fillMaxSize()
        .windowInsetsPadding(WindowInsets.statusBars)
)

Instead of extending to top app bar to bottom, now there's white gap at top. Why is this happening and how can i fix it ?