Align typography and placement between Home, MovieDetails and SeriesDetails (#751)

## Description
This PR addresses some quick changes to align the styling and placement
of elements on the Home, Movie details and Series details pages, using
Home as the reference point for the typography.

### Related issues
Ongoing discussion
[here](https://github.com/damontecres/Wholphin/discussions/704)

### Screenshots
Movie Details
<img width="1920" height="1080" alt="Screenshot_20260123_223116"
src="https://github.com/user-attachments/assets/ffd6a5c0-0ed1-4634-8c57-147f7783950f"
/>


Series Details
<img width="1920" height="1080" alt="Screenshot_20260123_223207"
src="https://github.com/user-attachments/assets/59c6be44-fcf4-4e28-8ad2-add304bd7650"
/>



### AI/LLM usage
LLM was only used to identify the current styling applied to the pages.
All code changes were made and reviewed manually

app/src/main/java/com/github/damontecres/wholphin/ui/cards/ChapterRow.kt

@@ -34,6 +34,7 @@ fun ChapterRow(
             text = stringResource(R.string.chapters),
             style = MaterialTheme.typography.titleLarge,
             color = MaterialTheme.colorScheme.onBackground,
+            modifier = Modifier.padding(start = 8.dp),
         )
         LazyRow(
             state = rememberLazyListState(),
@@ -41,7 +42,6 @@ fun ChapterRow(
             contentPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp),
             modifier =
                 Modifier
-                    .padding(start = 16.dp)
                     .fillMaxWidth()
                     .focusRestorer(),
         ) {

app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemRow.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -57,6 +58,7 @@ fun <T> ItemRow(
             text = title,
             style = MaterialTheme.typography.titleLarge,
             color = MaterialTheme.colorScheme.onBackground,
+            modifier = Modifier.padding(start = 8.dp),
         )
         LazyRow(
             state = state,

app/src/main/java/com/github/damontecres/wholphin/ui/cards/PersonRow.kt

@@ -46,6 +46,7 @@ fun PersonRow(
             text = stringResource(title),
             style = MaterialTheme.typography.titleLarge,
             color = MaterialTheme.colorScheme.onBackground,
+            modifier = Modifier.padding(start = 8.dp),
         )
         LazyRow(
             state = rememberLazyListState(),
@@ -53,7 +54,6 @@ fun PersonRow(
             contentPadding = PaddingValues(8.dp),
             modifier =
                 Modifier
-                    .padding(start = 16.dp)
                     .fillMaxWidth()
                     .focusRestorer(firstFocus),
         ) {

app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetails.kt

@@ -410,7 +410,7 @@ fun MovieDetailsContent(
     Box(modifier = modifier) {
         LazyColumn(
             verticalArrangement = Arrangement.spacedBy(16.dp),
-            contentPadding = PaddingValues(horizontal = 32.dp, vertical = 8.dp),
+            contentPadding = PaddingValues(horizontal = 24.dp, vertical = 8.dp),
             modifier = Modifier.fillMaxSize(),
         ) {
             item {
@@ -430,7 +430,7 @@ fun MovieDetailsContent(
                         modifier =
                             Modifier
                                 .fillMaxWidth()
-                                .padding(top = 32.dp, bottom = 16.dp),
+                                .padding(top = 40.dp, bottom = 16.dp),
                     )
                     ExpandablePlayButtons(
                         resumePosition = resumePosition,

app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetailsHeader.kt

@@ -46,46 +46,47 @@ fun MovieDetailsHeader(
     val context = LocalContext.current
     val scope = rememberCoroutineScope()
     Column(
-        verticalArrangement = Arrangement.spacedBy(8.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
         modifier = modifier,
     ) {
         // Title
         Text(
             text = movie.name ?: "",
-            color = MaterialTheme.colorScheme.onSurface,
-            style = MaterialTheme.typography.displaySmall,
-            fontWeight = FontWeight.SemiBold,
-            maxLines = 2,
+            color = MaterialTheme.colorScheme.onBackground,
+            style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold),
+            maxLines = 1,
             overflow = TextOverflow.Ellipsis,
-            modifier = Modifier.fillMaxWidth(.75f),
+            modifier =
+                Modifier
+                    .fillMaxWidth(.75f)
+                    .padding(start = 8.dp),
         )
 
         Column(
             verticalArrangement = Arrangement.spacedBy(4.dp),
             modifier = Modifier.fillMaxWidth(.60f),
         ) {
-            val padding = 4.dp
             QuickDetails(
                 movie.ui.quickDetails,
                 movie.timeRemainingOrRuntime,
-                Modifier.padding(bottom = padding),
+                Modifier.padding(start = 8.dp),
             )
 
             dto.genres?.letNotEmpty {
-                GenreText(it, Modifier.padding(bottom = padding))
+                GenreText(it, Modifier.padding(start = 8.dp))
             }
 
             VideoStreamDetails(
                 chosenStreams = chosenStreams,
                 numberOfVersions = movie.data.mediaSourceCount ?: 0,
-                modifier = Modifier.padding(bottom = padding),
+                modifier = Modifier.padding(start = 8.dp, top = 4.dp, bottom = 16.dp),
             )
             dto.taglines?.firstOrNull()?.let { tagline ->
                 Text(
                     text = tagline,
                     style = MaterialTheme.typography.bodyLarge,
                     fontStyle = FontStyle.Italic,
-                    modifier = Modifier,
+                    modifier = Modifier.padding(start = 8.dp),
                 )
             }
 
@@ -120,6 +121,7 @@ fun MovieDetailsHeader(
                         text = stringResource(R.string.directed_by, it),
                         style = MaterialTheme.typography.bodyMedium,
                         color = MaterialTheme.colorScheme.onSurface,
+                        modifier = Modifier.padding(start = 8.dp),
                     )
                 }
         }

app/src/main/java/com/github/damontecres/wholphin/ui/detail/series/SeriesDetails.kt

@@ -31,6 +31,7 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -332,12 +333,12 @@ fun SeriesDetailsContent(
         Column(
             modifier =
                 Modifier
-                    .padding(16.dp)
+                    .padding(horizontal = 24.dp, vertical = 16.dp)
                     .fillMaxSize(),
         ) {
             LazyColumn(
                 contentPadding = PaddingValues(bottom = 80.dp),
-                verticalArrangement = Arrangement.spacedBy(0.dp),
+                verticalArrangement = Arrangement.spacedBy(16.dp),
                 modifier = Modifier,
             ) {
                 item {
@@ -354,7 +355,7 @@ fun SeriesDetailsContent(
                         horizontalArrangement = Arrangement.spacedBy(16.dp),
                         modifier =
                             Modifier
-                                .padding(start = 16.dp)
+                                .padding(start = 8.dp)
                                 .focusRequester(focusRequesters[HEADER_ROW])
                                 .focusRestorer(playFocusRequester)
                                 .focusGroup()
@@ -599,23 +600,27 @@ fun SeriesDetailsHeader(
     val scope = rememberCoroutineScope()
     val dto = series.data
     Column(
-        verticalArrangement = Arrangement.spacedBy(8.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
         modifier = modifier,
     ) {
         Text(
             text = series.name ?: stringResource(R.string.unknown),
-            style = MaterialTheme.typography.displaySmall,
-            maxLines = 2,
+            color = MaterialTheme.colorScheme.onBackground,
+            style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold),
+            maxLines = 1,
             overflow = TextOverflow.Ellipsis,
-            modifier = Modifier.fillMaxWidth(.75f),
+            modifier =
+                Modifier
+                    .fillMaxWidth(.75f)
+                    .padding(start = 8.dp),
         )
         Column(
             verticalArrangement = Arrangement.spacedBy(4.dp),
             modifier = Modifier.fillMaxWidth(.60f),
         ) {
-            QuickDetails(series.ui.quickDetails, null)
+            QuickDetails(series.ui.quickDetails, null, Modifier.padding(start = 8.dp))
             dto.genres?.letNotEmpty {
-                GenreText(it)
+                GenreText(it, Modifier.padding(start = 8.dp, bottom = 12.dp))
             }
             dto.overview?.let { overview ->
                 OverviewText(

app/src/main/java/com/github/damontecres/wholphin/ui/main/HomePage.kt

@@ -244,7 +244,7 @@ fun HomePageContent(
                 verticalArrangement = Arrangement.spacedBy(8.dp),
                 contentPadding =
                     PaddingValues(
-                        start = 16.dp,
+                        start = 24.dp,
                         end = 16.dp,
                         top = 0.dp,
                         bottom = Cards.height2x3,