diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/SystemBarProtectionSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/SystemBarProtectionSnippets.kt
index 429e7ffd1..cc0697325 100644
--- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/SystemBarProtectionSnippets.kt
+++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/SystemBarProtectionSnippets.kt
@@ -20,7 +20,8 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
@@ -29,6 +30,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsTopHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
@@ -37,7 +39,6 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
@@ -74,32 +75,25 @@ class SystemBarProtectionSnippets : ComponentActivity() {
 @Composable
 private fun StatusBarProtection(
     color: Color = MaterialTheme.colorScheme.surfaceContainer,
-    heightProvider: () -> Float = calculateGradientHeight(),
 ) {
-
-    Canvas(Modifier.fillMaxSize()) {
-        val calculatedHeight = heightProvider()
-        val gradient = Brush.verticalGradient(
-            colors = listOf(
-                color.copy(alpha = 1f),
-                color.copy(alpha = .8f),
-                Color.Transparent
-            ),
-            startY = 0f,
-            endY = calculatedHeight
-        )
-        drawRect(
-            brush = gradient,
-            size = Size(size.width, calculatedHeight),
-        )
-    }
-}
-
-@Composable
-fun calculateGradientHeight(): () -> Float {
-    val statusBars = WindowInsets.statusBars
-    val density = LocalDensity.current
-    return { statusBars.getTop(density).times(1.2f) }
+    Spacer(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(
+                with(LocalDensity.current) {
+                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
+                }
+            )
+            .background(
+                brush = Brush.verticalGradient(
+                    colors = listOf(
+                        color.copy(alpha = 1f),
+                        color.copy(alpha = 0.8f),
+                        Color.Transparent
+                    )
+                )
+            )
+    )
 }
 // [END android_compose_system_bar_protection]