preview: keep the fullscreen close button off the car screen

With the preview filling the phone, the button sat on the car's nav bar and
swallowed taps there. It now goes only in the black beside the frame; with
no room, the back gesture leaves.
This commit is contained in:
Seb3thehacker committed 2026-10-19 23:32:38 -07:00
1 parent 32bef88a75
commit 19d3afb153
1 file changed
+21 -8
@@ -131,7 +131,7 @@ fun CarPreviewScreen(onBack: () -> Unit) {
} }
if (fullscreen) { if (fullscreen) {
Fullscreen(onBack) { Fullscreen(width.toFloat() / height, onBack) {
// No fillMax here: left to the bounds alone, aspectRatio takes the whole width or the // No fillMax here: left to the bounds alone, aspectRatio takes the whole width or the
// whole height, whichever the car's shape allows, and the rest stays black. // whole height, whichever the car's shape allows, and the rest stays black.
frameContent(Modifier) frameContent(Modifier)
@@ -171,6 +171,7 @@ fun CarPreviewScreen(onBack: () -> Unit) {
*/ */
@Composable @Composable
private fun Fullscreen( private fun Fullscreen(
aspect: Float,
onBack: () -> Unit, onBack: () -> Unit,
content: @Composable BoxScope.() -> Unit, content: @Composable BoxScope.() -> Unit,
) { ) {
@@ -192,19 +193,31 @@ private fun Fullscreen(
// is on and turning it sideways/back isn't an option. // is on and turning it sideways/back isn't an option.
BackHandler(onBack = onBack) BackHandler(onBack = onBack)
Box( androidx.compose.foundation.layout.BoxWithConstraints(
Modifier.fillMaxSize().background(Color.Black), Modifier.fillMaxSize().background(Color.Black),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {
content() content()
// The frame swallows every touch inside it, so leaving needs either the back gesture or // The frame swallows every touch inside it, so leaving needs either the back gesture or
// a button of its own. This one sits in the corner the car UI leaves emptiest. // a button of its own. The button goes in the black beside the frame, never on it: over
FilledTonalIconButton( // the frame it covered the car's own buttons. A frame the screen's own shape leaves no
onClick = onBack, // room, and then the back gesture is the way out.
modifier = Modifier.align(Alignment.BottomStart).padding(8.dp), val frameWidth = minOf(maxWidth, maxHeight * aspect)
) { val frameHeight = minOf(maxHeight, maxWidth / aspect)
Icon(Icons.Filled.Close, contentDescription = "Leave the car preview") val room = 56.dp
val corner = when {
maxWidth - frameWidth >= room * 2 -> Alignment.BottomStart
maxHeight - frameHeight >= room * 2 -> Alignment.TopStart
else -> null
}
if (corner != null) {
FilledTonalIconButton(
onClick = onBack,
modifier = Modifier.align(corner).padding(8.dp),
) {
Icon(Icons.Filled.Close, contentDescription = "Leave the car preview")
}
} }
} }
} }