fix input field overlapping chat when keyboard open

Root cause: gradient scrim (transparent at top) let chat text
bleed through when imePadding pushed the dock up. Fix: use solid
background color when keyboard is visible, gradient only when
keyboard is closed. Pills and spacer also hidden during keyboard.

Input field: pill shape instead of xl (rounder), higher opacity
(0.85/0.90 instead of 0.75/0.74) for cleaner look — less muddy
glass, more solid surface. Bottom spacer reduced to 4dp when
keyboard open (was 16dp) to sit tight above the keyboard.
This commit is contained in:
Bruno Deanoz 2026-06-22 01:09:00 +02:00
parent fb269731b7
commit ba01902b08
2 changed files with 22 additions and 16 deletions

View file

@ -559,8 +559,8 @@ fun ChatInput(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 8.dp),
shape = KaizenShapes.xl,
tintAlpha = GlassTiers.input(isDark),
shape = KaizenShapes.pill,
tintAlpha = if (isDark) 0.85f else 0.90f,
shadowStack = KaizenShadows.level2,
cornerRadius = 28.dp,
) {

View file

@ -687,26 +687,32 @@ fun ChatScreen(
}
}
// 3. Floating Bottom Control Dock (responsive centering and clear bottom margins)
// 3. Floating Bottom Control Dock
@OptIn(ExperimentalLayoutApi::class)
val imeVisible = WindowInsets.isImeVisible
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,
),
)
.then(
if (imeVisible) {
Modifier.background(scrimColor)
} else {
Modifier.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()
.imePadding()
.then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier)
) {
@OptIn(ExperimentalLayoutApi::class)
val imeVisible = WindowInsets.isImeVisible
if (!imeVisible) {
Spacer(Modifier.height(24.dp))
ModePillsRow(
@ -720,8 +726,8 @@ fun ChatScreen(
samplingPrefs = samplingPrefs,
onSamplingChange = { samplingPrefs = it },
)
Spacer(Modifier.height(10.dp))
}
Spacer(Modifier.height(10.dp))
ChatInput(
value = input,
onValueChange = { input = it },
@ -731,7 +737,7 @@ fun ChatScreen(
onAddClick = { showAttachMenu = !showAttachMenu },
onRemoveFile = { id -> pendingFiles.removeAll { it.id == id } },
)
Spacer(Modifier.height(16.dp))
Spacer(Modifier.height(if (imeVisible) 4.dp else 16.dp))
}
// Dismiss scrim — tap anywhere to close the attachment menu