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 // 2. Floating Top Menu Button
Row( val scrimColor = MaterialTheme.colorScheme.background
Box(
modifier = Modifier modifier = Modifier
.align(Alignment.TopStart) .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() .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, verticalAlignment = Alignment.CenterVertically,
) { ) {
GlassSurface( GlassSurface(
@ -459,6 +472,7 @@ fun ChatScreen(
modifier = Modifier.weight(1f, fill = false), modifier = Modifier.weight(1f, fill = false),
) )
} }
}
// Error banner when initial data load fails // Error banner when initial data load fails
if (loadError != null) { if (loadError != null) {
@ -485,9 +499,20 @@ fun ChatScreen(
Column( Column(
modifier = Modifier modifier = Modifier
.align(Alignment.BottomCenter) .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() .navigationBarsPadding()
.then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier) .then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier)
) { ) {
Spacer(Modifier.height(24.dp))
ModePillsRow(selected = selectedMode, onSelect = { selectedMode = it; haptics.tick() }) ModePillsRow(selected = selectedMode, onSelect = { selectedMode = it; haptics.tick() })
Spacer(Modifier.height(10.dp)) Spacer(Modifier.height(10.dp))
ChatInput( ChatInput(
@ -499,7 +524,7 @@ fun ChatScreen(
onAddClick = { filePicker.launch("*/*") }, onAddClick = { filePicker.launch("*/*") },
onRemoveFile = { id -> pendingFiles.removeAll { it.id == id } }, 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 // 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( Row(
modifier = modifier modifier = modifier
.clip(KaizenShapes.xl) .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) .border(1.dp, cs.onSurface.copy(alpha = 0.08f), KaizenShapes.xl)
.clickable { onClick() } .clickable { onClick() }
.padding(start = 14.dp, end = 8.dp, top = 9.dp, bottom = 9.dp), .padding(start = 14.dp, end = 8.dp, top = 9.dp, bottom = 9.dp),