fix: add system bar insets to call screen elements

Call screen elements were too close to the screen edges because they
didn't account for status bar and navigation bar insets. Apply
WindowInsets.statusBars and WindowInsets.navigationBars padding to
all call screen layouts while keeping video backgrounds full-bleed.

https://claude.ai/code/session_014espsysob7MrE8X8e75jFX
This commit is contained in:
Claude
2026-04-02 19:16:50 +00:00
parent 0a7577dc21
commit 293901a87e
@@ -28,11 +28,15 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.BluetoothAudio import androidx.compose.material.icons.filled.BluetoothAudio
@@ -201,7 +205,9 @@ private fun CallInProgressUI(
modifier = modifier =
Modifier Modifier
.fillMaxSize() .fillMaxSize()
.background(MaterialTheme.colorScheme.surface), .background(MaterialTheme.colorScheme.surface)
.windowInsetsPadding(WindowInsets.statusBars)
.windowInsetsPadding(WindowInsets.navigationBars),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {
Column( Column(
@@ -259,7 +265,9 @@ private fun IncomingCallUI(
modifier = modifier =
Modifier Modifier
.fillMaxSize() .fillMaxSize()
.background(MaterialTheme.colorScheme.surface), .background(MaterialTheme.colorScheme.surface)
.windowInsetsPadding(WindowInsets.statusBars)
.windowInsetsPadding(WindowInsets.navigationBars),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {
Column( Column(
@@ -387,6 +395,7 @@ private fun ConnectedCallUI(
Modifier Modifier
.size(120.dp, 160.dp) .size(120.dp, 160.dp)
.align(Alignment.TopEnd) .align(Alignment.TopEnd)
.windowInsetsPadding(WindowInsets.statusBars)
.padding(16.dp), .padding(16.dp),
mirror = true, mirror = true,
) )
@@ -432,7 +441,8 @@ private fun ConnectedCallUI(
modifier = modifier =
Modifier Modifier
.align(Alignment.TopCenter) .align(Alignment.TopCenter)
.padding(top = 48.dp), .windowInsetsPadding(WindowInsets.statusBars)
.padding(top = 16.dp),
) )
} }
@@ -441,7 +451,8 @@ private fun ConnectedCallUI(
modifier = modifier =
Modifier Modifier
.align(Alignment.BottomCenter) .align(Alignment.BottomCenter)
.padding(bottom = 48.dp), .windowInsetsPadding(WindowInsets.navigationBars)
.padding(bottom = 24.dp),
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
Row( Row(