design improvements

app/src/main/kotlin/org/mjdev/tvapp/base/ui/components/tv/CategoryRow.kt

@@ -8,13 +8,15 @@
 
 package org.mjdev.tvapp.base.ui.components.tv
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -34,26 +36,34 @@ fun CategoryRow(
     items: List<Any?> = listOf(Unit, Unit, Unit),
     rowState: TvLazyListState = rememberTvLazyListState(),
     padding: Dp = 16.dp,
+    backgroundColor: Color = Color.DarkGray,
     onItemClick: (item: Any?) -> Unit = {},
-) { // todo better design & scroll horizontally
-    TextAny(
+) {
+// todo better design & scroll horizontally
+    Column(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(0.dp, padding / 2),
-        text = title,
-        color = Color.White,
-        fontWeight = FontWeight.Bold
-    )
-    TVRow(
-        horizontalArrangement = Arrangement.spacedBy(padding),
-        modifier = Modifier.wrapContentSize(),
-        contentPadding = padding,
+            .background(backgroundColor, RectangleShape)
     ) {
-        items(items) { item ->
-            PhotoCard(
-                item = item,
-                onClick = onItemClick,
-            )
+        TextAny(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(padding / 2, padding / 2),
+            text = title,
+            color = Color.White,
+            fontWeight = FontWeight.Bold
+        )
+        TVRow(
+            horizontalArrangement = Arrangement.spacedBy(padding),
+            modifier = Modifier.fillMaxWidth(),
+            contentPadding = (padding.value * 1.3).dp, // todo due border & glow
+        ) {
+            items(items) { item ->
+                PhotoCard(
+                    item = item,
+                    onClick = onItemClick,
+                )
+            }
         }
     }
 }