Fix: Add padding for system bars

Added padding for system bars in RecipesList and RecipeDetailsSmall to prevent content from overlapping with system UI elements. Increased the minimum candidate height in RecipeDetailsSmall for better layout.
SEAbdulbasit · Jul 7, 2024 · 803c0c7 · 803c0c7
1 parent c9303bc
commit 803c0c7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/shared/src/commonMain/kotlin/details/RecipeDetailsSmall.kt b/shared/src/commonMain/kotlin/details/RecipeDetailsSmall.kt
@@ -116,7 +116,7 @@ fun RecipeDetailsSmall(
         }
     }
 
-    val candidateHeight = maxOf(toolbarOffsetHeightPx.value, 200f)
+    val candidateHeight = maxOf(toolbarOffsetHeightPx.value, 300f)
     val listState = rememberLazyListState()
     val (fraction, setFraction) = remember { mutableStateOf(1f) }
 
@@ -231,6 +231,7 @@ fun RecipeDetailsSmall(
                                         painter = painterResource(recipe.image),
                                         contentDescription = null,
                                         modifier = Modifier.aspectRatio(1f).align(Alignment.Center)
+                                            .windowInsetsPadding(WindowInsets.systemBars)
                                             .padding(16.dp).rotate(imageRotation.value.toFloat())
                                             .background(
                                                 Color.Transparent,

diff --git a/shared/src/commonMain/kotlin/recipeslist/RecipesList.kt b/shared/src/commonMain/kotlin/recipeslist/RecipesList.kt
@@ -5,7 +5,11 @@ import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@@ -41,6 +45,9 @@ fun RecipesListScreen(
         LazyVerticalGrid(
             state = listState, columns = GridCells.Fixed(if (isLarge) 3 else 1)
         ) {
+            item {
+                Spacer(modifier = Modifier.windowInsetsPadding(WindowInsets.systemBars))
+            }
             items(items.size) { item ->
                 val recipe = items[item]
                 RecipeListItemWrapper(