fix: gradient scrims on top/bottom floating bars, increase ModelPill opacity

Content was bleeding through the floating top bar (model pill + menu)
and bottom dock (mode pills + input) because they had no background.
Added vertical gradient scrims to both areas and bumped ModelPill
surface alpha from 0.7 to 0.92.
This commit is contained in:
Bruno Deanoz 2026-06-21 17:33:43 +02:00
parent 320ea855fd
commit 5804b337d9
2 changed files with 53 additions and 28 deletions

View file

@ -427,11 +427,24 @@ fun ChatScreen(
}
// 2. Floating Top Menu Button
Row(
val scrimColor = MaterialTheme.colorScheme.background
Box(
modifier = Modifier
.align(Alignment.TopStart)
.fillMaxWidth()
.background(
Brush.verticalGradient(
colorStops = arrayOf(
0f to scrimColor,
0.7f to scrimColor.copy(alpha = 0.55f),
1f to Color.Transparent,
),
)
)
.statusBarsPadding()
.padding(start = 16.dp, top = 10.dp, end = 16.dp),
) {
Row(
modifier = Modifier.padding(start = 16.dp, top = 10.dp, end = 16.dp, bottom = 20.dp),
verticalAlignment = Alignment.CenterVertically,
) {
GlassSurface(
@ -459,6 +472,7 @@ fun ChatScreen(
modifier = Modifier.weight(1f, fill = false),
)
}
}
// Error banner when initial data load fails
if (loadError != null) {
@ -485,9 +499,20 @@ fun ChatScreen(
Column(
modifier = Modifier
.align(Alignment.BottomCenter)
.background(
Brush.verticalGradient(
colorStops = arrayOf(
0f to Color.Transparent,
0.35f to scrimColor.copy(alpha = 0.6f),
0.7f to scrimColor.copy(alpha = 0.92f),
1f to scrimColor,
),
)
)
.navigationBarsPadding()
.then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier)
) {
Spacer(Modifier.height(24.dp))
ModePillsRow(selected = selectedMode, onSelect = { selectedMode = it; haptics.tick() })
Spacer(Modifier.height(10.dp))
ChatInput(
@ -499,7 +524,7 @@ fun ChatScreen(
onAddClick = { filePicker.launch("*/*") },
onRemoveFile = { id -> pendingFiles.removeAll { it.id == id } },
)
Spacer(Modifier.height(16.dp)) // Completely clears keyboard edges on all screens
Spacer(Modifier.height(16.dp))
}
// Model picker (bottom sheet), opened by the top pill

View file

@ -35,7 +35,7 @@ fun ModelPill(label: String, onClick: () -> Unit, modifier: Modifier = Modifier)
Row(
modifier = modifier
.clip(KaizenShapes.xl)
.background(cs.surface.copy(alpha = 0.7f))
.background(cs.surface.copy(alpha = 0.92f))
.border(1.dp, cs.onSurface.copy(alpha = 0.08f), KaizenShapes.xl)
.clickable { onClick() }
.padding(start = 14.dp, end = 8.dp, top = 9.dp, bottom = 9.dp),