krypto/kaizen-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix input field overlapping chat when keyboard open

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/src/main/java/dev/kaizen/app/chat/ChatComponents.kt
View file

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

18
app/src/main/java/dev/kaizen/app/chat/ChatScreen.kt
View file

@ -687,11 +687,17 @@ 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( Column(
modifier = Modifier modifier = Modifier
.align(Alignment.BottomCenter) .align(Alignment.BottomCenter)
.background( .then(
if (imeVisible) {
Modifier.background(scrimColor)
} else {
Modifier.background(
Brush.verticalGradient( Brush.verticalGradient(
colorStops = arrayOf( colorStops = arrayOf(
0f to Color.Transparent, 0f to Color.Transparent,
@ -701,12 +707,12 @@ fun ChatScreen(
), ),
) )
) )
}
)
.navigationBarsPadding() .navigationBarsPadding()
.imePadding() .imePadding()
.then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier) .then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier)
) { ) {
@OptIn(ExperimentalLayoutApi::class)
val imeVisible = WindowInsets.isImeVisible
if (!imeVisible) { if (!imeVisible) {
Spacer(Modifier.height(24.dp)) Spacer(Modifier.height(24.dp))
ModePillsRow( ModePillsRow(
@ -720,8 +726,8 @@ fun ChatScreen(
samplingPrefs = samplingPrefs, samplingPrefs = samplingPrefs,
onSamplingChange = { samplingPrefs = it }, onSamplingChange = { samplingPrefs = it },
) )
}
Spacer(Modifier.height(10.dp)) Spacer(Modifier.height(10.dp))
}
ChatInput( ChatInput(
value = input, value = input,
onValueChange = { input = it }, onValueChange = { input = it },
@ -731,7 +737,7 @@ fun ChatScreen(
onAddClick = { showAttachMenu = !showAttachMenu }, onAddClick = { showAttachMenu = !showAttachMenu },
onRemoveFile = { id -> pendingFiles.removeAll { it.id == id } }, 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 // Dismiss scrim — tap anywhere to close the attachment menu