From 59ccce9d54e912338969f581893388bab1e65700 Mon Sep 17 00:00:00 2001
From: Damontecres <damontecres@gmail.com>
Date: Sat, 16 May 2026 11:35:21 -0400
Subject: [PATCH] Fix small UI issue with long stream labels (#1388)

## Description
Fixes a small UI glitch when the subtitle label is too long, it would
slightly increase the high of the labels. This is especially noticeable
on series details if some episodes have the long label and some don't
because the episode row will bounce up and down a few pixels.

Also moves the labels closer together and changes "Disabled" to "None"
when subtitles are turned off.

### Related issues
None

### Testing
Emulator & compose previews

## Screenshots
### Before
The subtitle label is slightly taller than the others
<img width="528" height="36" alt="image"
src="https://github.com/user-attachments/assets/32d322bc-11cc-4238-840c-03ae41b069d3"
/>


### After
The ellipse doesn't look great, but there's limited space and looks
better than being cut off.
<img width="510" height="37" alt="image"
src="https://github.com/user-attachments/assets/40af707c-3121-40c0-a978-60781d9704d6"
/>


## AI or LLM usage
None
---
 .../ui/components/VideoStreamDetails.kt       | 68 ++++++++++++-------
 1 file changed, 44 insertions(+), 24 deletions(-)

diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/components/VideoStreamDetails.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/components/VideoStreamDetails.kt
index 7805a95a..ddfb7f0f 100644
--- a/app/src/main/java/com/github/damontecres/wholphin/ui/components/VideoStreamDetails.kt
+++ b/app/src/main/java/com/github/damontecres/wholphin/ui/components/VideoStreamDetails.kt
@@ -3,7 +3,9 @@ package com.github.damontecres.wholphin.ui.components
 import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -69,7 +71,7 @@ fun VideoStreamDetails(
 ) {
     val context = LocalContext.current
     Row(
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
         modifier = modifier,
     ) {
         val video =
@@ -131,7 +133,7 @@ fun VideoStreamDetails(
             remember(subtitleCount, subtitleStream) {
                 if (subtitleCount > 0 && subtitleStream == null) {
                     disabled = true
-                    context.getString(R.string.disabled)
+                    context.getString(R.string.none)
                 } else if (subtitleCount == 0 || subtitleStream == null) {
                     null
                 } else {
@@ -188,20 +190,21 @@ fun StreamLabel(
                     modifier = Modifier,
                 )
             }
+            val string =
+                remember(text, disabled, count) {
+                    val countToUse = if (disabled) count else count - 1
+                    if (countToUse > 0) {
+                        "$text (+$countToUse)"
+                    } else {
+                        text
+                    }
+                }
             Text(
-                text = text,
+                text = string,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
                 modifier = Modifier,
             )
-            val countToUse = if (disabled) count else count - 1
-            if (countToUse > 0) {
-                Text(
-                    text = "(+$countToUse)",
-                    maxLines = 1,
-                    modifier = Modifier,
-                )
-            }
         }
     }
 }
@@ -210,21 +213,38 @@ fun StreamLabel(
 @Composable
 private fun StreamLabelPreview() {
     WholphinTheme(appThemeColors = AppThemeColors.PURPLE) {
-        Row(
-            horizontalArrangement = Arrangement.spacedBy(8.dp),
-            modifier =
-                Modifier
-                    .background(MaterialTheme.colorScheme.background)
-                    .padding(8.dp),
+        Column(
+            verticalArrangement = Arrangement.spacedBy(16.dp),
         ) {
-            StreamLabel("1080p")
-            StreamLabel("HDR")
-            StreamLabel("H264")
-            StreamLabel("AC3 5.1", icon = R.string.fa_volume_high, count = 2)
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                modifier =
+                    Modifier
+                        .background(MaterialTheme.colorScheme.background)
+                        .padding(8.dp),
+            ) {
+                StreamLabel("1080p")
+                StreamLabel("HDR")
+                StreamLabel("H264")
+                StreamLabel("AC3 5.1", icon = R.string.fa_volume_high, count = 2)
 
-            StreamLabel("PGS", count = 1)
-            StreamLabel("PGS", count = 1, disabled = true)
-            StreamLabel("PGS", count = 2)
+                StreamLabel("PGS", count = 1)
+                StreamLabel("PGS", count = 1, disabled = true)
+                StreamLabel("PGS", count = 2)
+            }
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                modifier =
+                    Modifier
+                        .background(MaterialTheme.colorScheme.background)
+                        .padding(8.dp)
+                        .fillMaxWidth(.7f),
+            ) {
+                StreamLabel("1080p")
+                StreamLabel("HDR")
+                StreamLabel("English Dolby Atmos 5.1", icon = R.string.fa_volume_high, count = 2)
+                StreamLabel("English SDH SRT", icon = R.string.fa_closed_captioning, count = 35)
+            }
         }
     }
 }