Ajuste del número de columnas en vistas de detalle (#63)

* Set variable n. of columns in the detail views depending on screen size

app/src/main/java/com/matedroid/ui/screens/charges/ChargeDetailScreen.kt

@@ -56,6 +56,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
@@ -521,6 +522,17 @@ private fun StatsSectionCard(
     icon: ImageVector,
     stats: List<StatItem>
 ) {
+    // Get the current screen settings
+    val configuration = LocalConfiguration.current
+    val screenWidth = configuration.screenWidthDp
+
+    // Define how many columns we want according to the available screen width
+    val columnCount = when {
+        screenWidth > 600 -> 4 // Big screen or landscape orientation
+        screenWidth > 340 -> 3 // Standard screen
+        else -> 2              // Small screen
+    }
+
     Card(
         modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(
@@ -548,8 +560,8 @@ private fun StatsSectionCard(
                 )
             }
 
-            // Stats grid - 2 or more columns
-            val chunked = stats.chunked(2)
+            // Divide the list of statistics according to the calculated number of columns
+            val chunked = stats.chunked(columnCount)
             chunked.forEachIndexed { index, row ->
                 Row(
                     modifier = Modifier.fillMaxWidth(),
@@ -562,9 +574,14 @@ private fun StatsSectionCard(
                             modifier = Modifier.weight(1f)
                         )
                     }
-                    // Fill empty space if odd number
-                    if (row.size == 1) {
-                        Spacer(modifier = Modifier.weight(1f))
+
+                    // Fill the leftover space if the last row is not complete.
+                    // This prevents a single item from stretching too much
+                    val emptySlots = columnCount - row.size
+                    if (emptySlots > 0) {
+                        repeat(emptySlots) {
+                            Spacer(modifier = Modifier.weight(1f))
+                        }
                     }
                 }
                 if (index < chunked.size - 1) {
@@ -575,6 +592,7 @@ private fun StatsSectionCard(
     }
 }
 
+
 @Composable
 private fun StatItemView(
     label: String,

app/src/main/java/com/matedroid/ui/screens/drives/DriveDetailScreen.kt

@@ -59,6 +59,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
@@ -517,6 +518,17 @@ private fun StatsSectionCard(
     icon: ImageVector,
     stats: List<StatItem>
 ) {
+    // Get the current screen settings
+    val configuration = LocalConfiguration.current
+    val screenWidth = configuration.screenWidthDp
+
+    // Define how many columns we want according to the available screen width
+    val columnCount = when {
+        screenWidth > 600 -> 4 // Big screen or landscape orientation
+        screenWidth > 340 -> 3 // Standard screen
+        else -> 2              // Small screen
+    }
+
     Card(
         modifier = Modifier.fillMaxWidth(),
         colors = CardDefaults.cardColors(
@@ -544,8 +556,8 @@ private fun StatsSectionCard(
                 )
             }
 
-            // Stats grid - 2 or more columns
-            val chunked = stats.chunked(2)
+            // Divide the list of statistics according to the calculated number of columns
+            val chunked = stats.chunked(columnCount)
             chunked.forEachIndexed { index, row ->
                 Row(
                     modifier = Modifier.fillMaxWidth(),
@@ -558,9 +570,14 @@ private fun StatsSectionCard(
                             modifier = Modifier.weight(1f)
                         )
                     }
-                    // Fill empty space if odd number
-                    if (row.size == 1) {
-                        Spacer(modifier = Modifier.weight(1f))
+
+                    // Fill the leftover space if the last row is not complete.
+                    // This prevents a single item from stretching too much
+                    val emptySlots = columnCount - row.size
+                    if (emptySlots > 0) {
+                        repeat(emptySlots) {
+                            Spacer(modifier = Modifier.weight(1f))
+                        }
                     }
                 }
                 if (index < chunked.size - 1) {

docs/DEVELOPMENT.md

@@ -100,13 +100,13 @@ Without secrets, the APK is signed with a debug keystore (fine for sideloading,
 
 #### Makefile Targets
 
-| Target | Description |
-|--------|-------------|
-| `make build` | Build debug APK |
+| Target         | Description                                     |
+|----------------|-------------------------------------------------|
+| `make build`   | Build debug APK                                 |
 | `make install` | Build and install debug APK on connected device |
-| `make run` | Build, install, and launch the app |
-| `make clean` | Clean build artifacts |
-| `make test` | Run unit tests |
+| `make run`     | Build, install, and launch the app              |
+| `make clean`   | Clean build artifacts                           |
+| `make test`    | Run unit tests                                  |
 
 Or use Android Studio:
 1. Open the project folder