feat(broadcast): float banner as a rounded card

The broadcast banner was rendered full-width with a 50dp bottom
offset that assumed a bottom navigation bar underneath. On screens
without the bottom bar the flat rectangle hovered above empty space,
which looked like a misaligned attachment rather than an overlay.

Restyle the banner as a floating card: 94% width (capped at 560dp for
tablets), rounded corners, shadow elevation. Keep it above a bottom
bar when present (50dp bar + 8dp float gap), but since it now reads
as an intentional floating toast, the same offset looks correct on
screens without a bottom bar as well.
This commit is contained in:
Claude
2026-04-23 22:10:30 +00:00
parent bbdcd8adbe
commit 405befaa68
2 changed files with 8 additions and 3 deletions
@@ -38,6 +38,7 @@ import androidx.compose.foundation.layout.height
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.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Error import androidx.compose.material.icons.filled.Error
@@ -97,7 +98,9 @@ fun BroadcastBanner(
) { ) {
Surface( Surface(
color = MaterialTheme.colorScheme.surfaceContainer, color = MaterialTheme.colorScheme.surfaceContainer,
tonalElevation = 2.dp, tonalElevation = 3.dp,
shadowElevation = 6.dp,
shape = RoundedCornerShape(20.dp),
modifier = modifier =
Modifier Modifier
.fillMaxWidth() .fillMaxWidth()
@@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
@@ -130,10 +131,11 @@ fun DisplaySnack(
}, },
modifier = modifier =
Modifier Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter) .align(Alignment.BottomCenter)
.navigationBarsPadding() .navigationBarsPadding()
.padding(bottom = 50.dp), .padding(start = 12.dp, end = 12.dp, bottom = 58.dp)
.fillMaxWidth(0.94f)
.widthIn(max = 560.dp),
) )
} }
} }