From bafae15f7e469ee7ac38529e856725156323dd27 Mon Sep 17 00:00:00 2001
From: tapframe <85391825+tapframe@users.noreply.github.com>
Date: Wed, 11 Mar 2026 21:30:12 +0530
Subject: [PATCH] ui changes

---
 .../features/details/components/DetailHero.kt | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt
index f28a444e0..01b9aa4ac 100644
--- a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt
+++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt
@@ -30,37 +30,40 @@ fun DetailHero(
     modifier: Modifier = Modifier,
 ) {
     Box(
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier
+            .fillMaxWidth()
+            .aspectRatio(0.75f)
+            .graphicsLayer {
+                clip = true
+            },
     ) {
-        val imageUrl = meta.background ?: meta.poster
-        if (imageUrl != null) {
-            AsyncImage(
-                model = imageUrl,
-                contentDescription = meta.name,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .aspectRatio(0.75f)
-                    .graphicsLayer {
-                        translationY = scrollOffset * 0.5f
-                    },
-                contentScale = ContentScale.Crop,
-            )
-        } else {
-            Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .aspectRatio(0.75f)
-                    .background(MaterialTheme.colorScheme.surface),
-            )
-        }
-
-        // Gradient overlay at the bottom
         Box(
             modifier = Modifier
-                .fillMaxWidth()
-                .aspectRatio(0.75f),
+                .fillMaxSize(),
             contentAlignment = Alignment.BottomCenter,
         ) {
+            val imageUrl = meta.background ?: meta.poster
+            if (imageUrl != null) {
+                AsyncImage(
+                    model = imageUrl,
+                    contentDescription = meta.name,
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .graphicsLayer {
+                            translationY = scrollOffset * 0.5f
+                            scaleX = 1.08f
+                            scaleY = 1.08f
+                        },
+                    contentScale = ContentScale.Crop,
+                )
+            } else {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(MaterialTheme.colorScheme.surface),
+                )
+            }
+
             Box(
                 modifier = Modifier
                     .fillMaxWidth()