title: Bottom Nav Bar overlaps screen content in Jetpack Compose
body: <p>I have a <code>BottomNavBar</code> which is called inside the <code>bottomBar</code> of a <code>Scaffold</code>.<br />
  Every screen contains a <code>LazyColumn</code> which displays a bunch of images.<br />
  For some reason when I finish scrolling, the <code>BottomNavBar</code> overlaps the lower part of the items list.<br />
  How can I fix this?</p>
  <p><a href="https://i.stack.imgur.com/fLfL0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fLfL0.png" alt="enter image description here" /></a></p>
  <p>Here the set content of MainActivity</p>
  <pre><code>SetContent{
      Scaffold(
          topBar = {
              TopAppBar(
                  title = { Text(text = &quot;tartufozon&quot;) },
                  actions = {
                      IconButton(onClick = { Timber.d(&quot;Mail clicked&quot;) }) {
                          Icon(Icons.Default.Email, contentDescription = null)
                      }
                  }
              )
          },
          bottomBar = {
              BottomNavBar(navController = navController)
          }
      ) {
      BottomNavScreensController(navController = navController)
      }
  }
  </code></pre>