From d58dd4bcceb8cd88483bbeca6df85b1a1ef94a81 Mon Sep 17 00:00:00 2001
From: davotoula <david.kaspar@gmail.com>
Date: Wed, 15 Apr 2026 08:19:42 +0200
Subject: [PATCH] fix(hls): lay rendition checkboxes out horizontally via
 FlowRow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five full-width rows eating half a screen was too much real estate for
a five-item toggle. Replace the fillMaxWidth stack with a FlowRow where
each item is a compact checkbox + short label ("360p", "540p", …),
wrapping to the next line on narrow screens.

The bitrate subline per rendition was cut — the values are public
library defaults anyway (360/540/720/1080/4K ladder) and the secondary
text was the biggest contributor to the vertical bloat. Above-source
rungs remain disabled; the grey-out on the checkbox + label is still
visible in the new layout.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../loggedIn/video/hls/NewHlsVideoScreen.kt   | 55 ++++++++-----------
 1 file changed, 23 insertions(+), 32 deletions(-)

diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/video/hls/NewHlsVideoScreen.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/video/hls/NewHlsVideoScreen.kt
index 6627e91e1..14396a5f0 100644
--- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/video/hls/NewHlsVideoScreen.kt
+++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/video/hls/NewHlsVideoScreen.kt
@@ -30,6 +30,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -439,17 +440,19 @@ private fun RenditionsCheckboxes(vm: NewHlsVideoViewModel) {
         Spacer(Modifier.height(8.dp))
     }
 
-    HlsLadder.default().renditions.forEach { rendition ->
-        val label = rendition.resolution.label
-        val aboveSource = sourceShortSide != null && rendition.resolution.shortSide > sourceShortSide
-        val enabled = !aboveSource
-        val checked = label in vm.selectedRenditionLabels && !aboveSource
+    FlowRow(
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        HlsLadder.default().renditions.forEach { rendition ->
+            val label = rendition.resolution.label
+            val aboveSource = sourceShortSide != null && rendition.resolution.shortSide > sourceShortSide
+            val enabled = !aboveSource
+            val checked = label in vm.selectedRenditionLabels && !aboveSource
 
-        Row(
-            modifier =
-                Modifier
-                    .fillMaxWidth()
-                    .clickable(enabled = enabled) {
+            Row(
+                modifier =
+                    Modifier.clickable(enabled = enabled) {
                         vm.selectedRenditionLabels =
                             if (checked) {
                                 vm.selectedRenditionLabels - label
@@ -457,34 +460,22 @@ private fun RenditionsCheckboxes(vm: NewHlsVideoViewModel) {
                                 vm.selectedRenditionLabels + label
                             }
                     },
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            Checkbox(
-                checked = checked,
-                enabled = enabled,
-                onCheckedChange = {
-                    vm.selectedRenditionLabels =
-                        if (it) vm.selectedRenditionLabels + label else vm.selectedRenditionLabels - label
-                },
-            )
-            Column(modifier = Modifier.weight(1f)) {
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Checkbox(
+                    checked = checked,
+                    enabled = enabled,
+                    onCheckedChange = {
+                        vm.selectedRenditionLabels =
+                            if (it) vm.selectedRenditionLabels + label else vm.selectedRenditionLabels - label
+                    },
+                )
                 Text(
                     text = label,
                     style = MaterialTheme.typography.bodyLarge,
                     color =
                         if (enabled) MaterialTheme.colorScheme.onSurface else MaterialTheme.colorScheme.onSurfaceVariant,
                 )
-                val subline =
-                    if (aboveSource) {
-                        stringResource(R.string.hls_rendition_above_source)
-                    } else {
-                        stringResource(R.string.hls_rendition_bitrate_kbps_format, rendition.bitrateKbps)
-                    }
-                Text(
-                    text = subline,
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                )
             }
         }
     }