meta hero layout changes

composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/MetaDetailsScreen.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
@@ -18,6 +19,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.layout.statusBars
@@ -46,6 +48,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.nuvio.app.core.ui.NuvioBackButton
@@ -306,6 +309,11 @@ fun MetaDetailsScreen(
                     label = "detail_floating_header_progress",
                 )
 
+                BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+                    val isTablet = maxWidth >= 720.dp
+                    val contentHorizontalPadding = if (isTablet) 32.dp else 18.dp
+                    val contentMaxWidth = detailTabletContentMaxWidth(maxWidth, isTablet)
+
                     Box(modifier = Modifier.fillMaxSize()) {
                         Column(
                             modifier = Modifier
@@ -314,6 +322,8 @@ fun MetaDetailsScreen(
                         ) {
                             DetailHero(
                                 meta = meta,
+                                isTablet = isTablet,
+                                contentMaxWidth = contentMaxWidth,
                                 scrollOffset = scrollState.value,
                                 onHeightChanged = { heroHeightPx = it },
                             )
@@ -321,13 +331,16 @@ fun MetaDetailsScreen(
                             Column(
                                 modifier = Modifier
                                     .fillMaxWidth()
-                                .padding(horizontal = 18.dp),
+                                    .padding(horizontal = contentHorizontalPadding)
+                                    .widthIn(max = if (isTablet) contentMaxWidth else Dp.Unspecified),
                                 verticalArrangement = Arrangement.spacedBy(20.dp),
+                                horizontalAlignment = Alignment.CenterHorizontally,
                             ) {
                                 DetailActionButtons(
                                     playLabel = playButtonLabel,
                                     saveLabel = if (isSaved) "Saved" else "Save",
                                     isSaved = isSaved,
+                                    isTablet = isTablet,
                                     onPlayClick = {
                                         when {
                                             (meta.type == "series" || hasEpisodes) && seriesAction != null -> {
@@ -600,12 +613,12 @@ fun MetaDetailsScreen(
                                     }
                                     pickerPending = false
                                 }
-                            Unit
                             },
                         )
                     }
                 }
             }
+        }
 
         if (requestedMeta == null) {
             NuvioBackButton(
@@ -621,6 +634,13 @@ fun MetaDetailsScreen(
     }
 }
 
+private fun detailTabletContentMaxWidth(maxWidth: Dp, isTablet: Boolean): Dp =
+    if (!isTablet) {
+        maxWidth
+    } else {
+        (maxWidth * 0.6f).coerceIn(520.dp, 680.dp)
+    }
+
 @Composable
 @OptIn(ExperimentalMaterial3Api::class)
 private fun TraktListPickerDialog(

composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailActionButtons.kt

@@ -18,6 +18,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -30,6 +31,7 @@ fun DetailActionButtons(
     playLabel: String = "Play",
     saveLabel: String = "Save",
     isSaved: Boolean = false,
+    isTablet: Boolean = false,
     onPlayClick: () -> Unit = {},
     onSaveClick: () -> Unit = {},
 ) {
@@ -38,12 +40,22 @@ fun DetailActionButtons(
 
     Row(
         modifier = modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        horizontalArrangement = if (isTablet) {
+            Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally)
+        } else {
+            Arrangement.spacedBy(12.dp)
+        },
     ) {
         Button(
             onClick = onPlayClick,
             modifier = Modifier
-                .weight(1f)
+                .then(
+                    if (isTablet) {
+                        Modifier.width(220.dp)
+                    } else {
+                        Modifier.weight(1f)
+                    }
+                )
                 .height(50.dp),
             shape = RoundedCornerShape(40.dp),
             colors = ButtonDefaults.buttonColors(
@@ -68,7 +80,13 @@ fun DetailActionButtons(
         OutlinedButton(
             onClick = onSaveClick,
             modifier = Modifier
-                .weight(1f)
+                .then(
+                    if (isTablet) {
+                        Modifier.width(220.dp)
+                    } else {
+                        Modifier.weight(1f)
+                    }
+                )
                 .height(50.dp),
             shape = RoundedCornerShape(40.dp),
             border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline),

composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt

@@ -2,13 +2,14 @@ package com.nuvio.app.features.details.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -19,6 +20,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.graphics.graphicsLayer
 import coil3.compose.AsyncImage
@@ -27,14 +29,21 @@ import com.nuvio.app.features.details.MetaDetails
 @Composable
 fun DetailHero(
     meta: MetaDetails,
+    isTablet: Boolean = false,
     scrollOffset: Int = 0,
+    contentMaxWidth: Dp = 560.dp,
     onHeightChanged: (Int) -> Unit = {},
     modifier: Modifier = Modifier,
 ) {
+    BoxWithConstraints(
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        val heroHeight = detailHeroHeight(maxWidth, isTablet)
+
         Box(
-        modifier = modifier
+            modifier = Modifier
                 .fillMaxWidth()
-            .aspectRatio(0.75f)
+                .height(heroHeight)
                 .onSizeChanged { onHeightChanged(it.height) }
                 .graphicsLayer {
                     clip = true
@@ -57,6 +66,7 @@ fun DetailHero(
                                 scaleX = 1.08f
                                 scaleY = 1.08f
                             },
+                        alignment = if (isTablet) Alignment.TopCenter else Alignment.Center,
                         contentScale = ContentScale.Crop,
                     )
                 } else {
@@ -86,7 +96,7 @@ fun DetailHero(
                 Column(
                     modifier = Modifier
                         .fillMaxWidth()
-                    .padding(horizontal = 18.dp)
+                        .padding(horizontal = if (isTablet) 32.dp else 18.dp)
                         .padding(bottom = 8.dp),
                     horizontalAlignment = Alignment.CenterHorizontally,
                 ) {
@@ -95,14 +105,16 @@ fun DetailHero(
                             model = meta.logo,
                             contentDescription = "${meta.name} logo",
                             modifier = Modifier
-                            .fillMaxWidth(0.6f)
+                                .fillMaxWidth(if (isTablet) 0.56f else 0.6f)
-                            .height(80.dp),
+                                .widthIn(max = contentMaxWidth)
+                                .height(if (isTablet) 72.dp else 80.dp),
+                            alignment = Alignment.Center,
                             contentScale = ContentScale.Fit,
                         )
                     } else {
                         Text(
                             text = meta.name,
-                        style = MaterialTheme.typography.displayLarge,
+                            style = if (isTablet) MaterialTheme.typography.displaySmall else MaterialTheme.typography.displayLarge,
                             color = MaterialTheme.colorScheme.onBackground,
                             textAlign = TextAlign.Center,
                         )
@@ -121,3 +133,11 @@ fun DetailHero(
             }
         }
     }
+}
+
+private fun detailHeroHeight(maxWidth: Dp, isTablet: Boolean): Dp =
+    if (!isTablet) {
+        (maxWidth * 1.33f).coerceIn(420.dp, 760.dp)
+    } else {
+        (maxWidth * 0.42f).coerceIn(300.dp, 420.dp)
+    }