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.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Error
@@ -97,7 +98,9 @@ fun BroadcastBanner(
) {
Surface(
color = MaterialTheme.colorScheme.surfaceContainer,
tonalElevation = 2.dp,
tonalElevation = 3.dp,
shadowElevation = 6.dp,
shape = RoundedCornerShape(20.dp),
modifier =
Modifier
.fillMaxWidth()
@@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@@ -130,10 +131,11 @@ fun DisplaySnack(
},
modifier =
Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter)
.navigationBarsPadding()
.padding(bottom = 50.dp),
.padding(start = 12.dp, end = 12.dp, bottom = 58.dp)
.fillMaxWidth(0.94f)
.widthIn(max = 560.dp),
)
}
}