Fix edge to edge extra padding and overlapping content (#5398)

GetStream · Sep 6, 2024 · 09b4cd8 · 09b4cd8
1 parent f213628
commit 09b4cd8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/...oid-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/MessagesScreen.kt b/...oid-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/MessagesScreen.kt
@@ -30,13 +30,14 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.MaterialTheme
@@ -203,7 +204,9 @@ public fun MessagesScreen(
     Box(
         modifier = Modifier
             .fillMaxSize()
-            .systemBarsPadding()
+            .safeDrawingPadding()
+            // Explicitly consume IME inset (even if not needed), to avoid children applying it again on some devices.
+            .consumeWindowInsets(WindowInsets.ime)
             .testTag("Stream_MessagesScreen"),
     ) {
         Scaffold(

diff --git a/.../main/java/io/getstream/chat/android/compose/ui/messages/attachments/AttachmentsPicker.kt b/.../main/java/io/getstream/chat/android/compose/ui/messages/attachments/AttachmentsPicker.kt
@@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.Icon
@@ -92,8 +93,9 @@ public fun AttachmentsPicker(
 
     Box(
         modifier = Modifier
-            .fillMaxSize()
             .background(ChatTheme.attachmentPickerTheme.backgroundOverlay)
+            .safeDrawingPadding()
+            .fillMaxSize()
             .clickable(
                 onClick = onDismiss,
                 indication = null,

diff --git a/...e/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/MessageComposer.kt b/...e/src/main/java/io/getstream/chat/android/compose/ui/messages/composer/MessageComposer.kt
@@ -30,8 +30,8 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.Checkbox
@@ -218,7 +218,7 @@ public fun MessageComposer(
     val messageComposerState by viewModel.messageComposerState.collectAsState()
 
     MessageComposer(
-        modifier = modifier.imePadding(),
+        modifier = modifier.safeDrawingPadding(),
         onSendMessage = { text, attachments ->
             val messageWithData = viewModel.buildNewMessage(text, attachments)