Improve version display in app details

app/src/main/kotlin/org/fdroid/ui/details/Versions.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement.spacedBy
 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.text.selection.SelectionContainer
 import androidx.compose.material.icons.Icons
@@ -83,7 +84,7 @@ fun Version(
       modifier = Modifier.padding(bottom = 8.dp).clickable { expanded = !expanded },
     ) {
       ExpandIconChevron(expanded)
-      Row {
+      Row(verticalAlignment = Alignment.CenterVertically) {
         Column(modifier = Modifier.weight(1f)) {
           Text(
             text = item.version.versionName,
@@ -103,14 +104,14 @@ fun Version(
             containerColor = MaterialTheme.colorScheme.primary,
             modifier = Modifier.padding(start = 8.dp),
           ) {
-            Text(text = stringResource(R.string.app_installed), modifier = Modifier.padding(2.dp))
+            Text(text = stringResource(R.string.app_installed), modifier = Modifier.padding(4.dp))
           }
         if (item.isSuggested)
           Badge(
             containerColor = MaterialTheme.colorScheme.secondary,
             modifier = Modifier.padding(start = 8.dp),
           ) {
-            Text(text = stringResource(R.string.app_suggested), modifier = Modifier.padding(2.dp))
+            Text(text = stringResource(R.string.app_suggested), modifier = Modifier.padding(4.dp))
           }
       }
     }
@@ -120,84 +121,80 @@ fun Version(
     ) {
       val coroutineScope = rememberCoroutineScope()
       var showMeteredDialog by remember { mutableStateOf(false) }
-      Row(horizontalArrangement = spacedBy(16.dp), verticalAlignment = Alignment.CenterVertically) {
-        Column(modifier = Modifier.weight(1f)) {
-          if (!item.isCompatible || !item.isSignerCompatible)
+      Column(modifier = Modifier.fillMaxWidth().padding(start = 40.dp)) {
+        if (!item.isCompatible || !item.isSignerCompatible)
+          Text(
+            text =
+              if (!item.isCompatible) {
+                stringResource(R.string.app_details_incompatible_version)
+              } else {
+                stringResource(R.string.app_details_incompatible_signer)
+              },
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.error,
+          )
+        item.version.size?.let { size ->
+          Text(
+            text =
+              stringResource(
+                R.string.size_colon,
+                Formatter.formatFileSize(LocalContext.current, size),
+              ),
+            style = MaterialTheme.typography.bodySmall,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+          )
+        }
+        SelectionContainer {
+          Text(
+            text = stringResource(R.string.version_code_colon, item.version.versionCode.toString()),
+            style = MaterialTheme.typography.bodySmall,
+            maxLines = 1,
+            overflow = TextOverflow.MiddleEllipsis,
+          )
+        }
+        val sdkString = buildString {
+          item.version.packageManifest.minSdkVersion?.let { sdk ->
+            append(stringResource(R.string.sdk_min_version, sdk))
+          }
+          item.version.packageManifest.targetSdkVersion?.let { sdk ->
+            if (isNotEmpty()) append(" ")
+            append(stringResource(R.string.sdk_target_version, sdk))
+          }
+          item.version.packageManifest.maxSdkVersion?.let { sdk ->
+            if (isNotEmpty()) append(" ")
+            append(stringResource(R.string.sdk_max_version, sdk))
+          }
+        }
+        if (sdkString.isNotEmpty())
+          SelectionContainer {
             Text(
-              text =
-                if (!item.isCompatible) {
-                  stringResource(R.string.app_details_incompatible_version)
-                } else {
-                  stringResource(R.string.app_details_incompatible_signer)
-                },
+              text = stringResource(R.string.sdk_versions_colon, sdkString),
               style = MaterialTheme.typography.bodySmall,
-              color = MaterialTheme.colorScheme.error,
+              maxLines = 1,
+              overflow = TextOverflow.StartEllipsis,
             )
-          item.version.size?.let { size ->
+          }
+        item.version.packageManifest.nativecode?.let { nativeCode ->
+          if (nativeCode.isNotEmpty())
+            SelectionContainer {
+              Text(
+                text = stringResource(R.string.architectures_colon, nativeCode.joinToString(", ")),
+                style = MaterialTheme.typography.bodySmall,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
+              )
+            }
+        }
+        item.version.signer?.let { signer ->
+          SelectionContainer {
             Text(
-              text =
-                stringResource(
-                  R.string.size_colon,
-                  Formatter.formatFileSize(LocalContext.current, size),
-                ),
+              text = stringResource(R.string.signer_colon, signer.sha256[0].substring(0..15)),
               style = MaterialTheme.typography.bodySmall,
               maxLines = 1,
               overflow = TextOverflow.Ellipsis,
             )
           }
-          SelectionContainer {
-            Text(
-              text =
-                stringResource(R.string.version_code_colon, item.version.versionCode.toString()),
-              style = MaterialTheme.typography.bodySmall,
-              maxLines = 1,
-              overflow = TextOverflow.MiddleEllipsis,
-            )
-          }
-          val sdkString = buildString {
-            item.version.packageManifest.minSdkVersion?.let { sdk ->
-              append(stringResource(R.string.sdk_min_version, sdk))
-            }
-            item.version.packageManifest.targetSdkVersion?.let { sdk ->
-              if (isNotEmpty()) append(" ")
-              append(stringResource(R.string.sdk_target_version, sdk))
-            }
-            item.version.packageManifest.maxSdkVersion?.let { sdk ->
-              if (isNotEmpty()) append(" ")
-              append(stringResource(R.string.sdk_max_version, sdk))
-            }
-          }
-          if (sdkString.isNotEmpty())
-            SelectionContainer {
-              Text(
-                text = stringResource(R.string.sdk_versions_colon, sdkString),
-                style = MaterialTheme.typography.bodySmall,
-                maxLines = 1,
-                overflow = TextOverflow.StartEllipsis,
-              )
-            }
-          item.version.packageManifest.nativecode?.let { nativeCode ->
-            if (nativeCode.isNotEmpty())
-              SelectionContainer {
-                Text(
-                  text =
-                    stringResource(R.string.architectures_colon, nativeCode.joinToString(", ")),
-                  style = MaterialTheme.typography.bodySmall,
-                  maxLines = 1,
-                  overflow = TextOverflow.Ellipsis,
-                )
-              }
-          }
-          item.version.signer?.let { signer ->
-            SelectionContainer {
-              Text(
-                text = stringResource(R.string.signer_colon, signer.sha256[0].substring(0..15)),
-                style = MaterialTheme.typography.bodySmall,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-              )
-            }
-          }
         }
         if (item.showInstallButton) {
           val coroutineScope = rememberCoroutineScope()
@@ -211,6 +208,7 @@ fun Version(
                 coroutineScope.launch { scrollUp() }
               }
             },
+            modifier = Modifier.padding(top = 8.dp, end = 16.dp).fillMaxWidth(),
           )
         }
       }

app/src/screenshotTestBasicDefaultDebug/reference/org/fdroid/ui/details/DetailsTestKt/DetailsInstallTest_9f4e7551_0.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d43c4f0e7edc8dc6df20e67e6833b9d6351b01d8e0d28aa95965fd8474874298
-size 306138
+oid sha256:716e489ba77720da9e1fe56a7d34a3aea8e9a8907def61eb4479447cf1f7c78d
+size 306602

app/src/screenshotTestBasicDefaultDebug/reference/org/fdroid/ui/details/DetailsTestKt/DetailsNightTest_150baa59_0.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:13101051c48afbeba93de01bec1927e26e7644935e944f235305a2630e4f316d
-size 362639
+oid sha256:1dba67602ed49df8ee22fe0d53193e17812dcfc8663a8c3da2cf937522287b3e
+size 346513