fix: ensure consistent asset card heights

Author: nomanr

compose/src/commonMain/kotlin/com/blockstream/compose/components/GreenAsset.kt

@@ -31,6 +31,7 @@ import com.blockstream.compose.theme.labelLarge
 import com.blockstream.compose.theme.titleSmall
 import com.blockstream.compose.theme.whiteHigh
 import com.blockstream.compose.theme.whiteMedium
+import com.blockstream.ui.components.ConsistentHeightBox
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 
@@ -95,27 +96,11 @@ fun GreenAsset(
                         }
 
                         if (assetBalance.balance != null) {
-                            Column(horizontalAlignment = Alignment.End) {
-                                // Amount
-                                Text(
-                                    text = assetBalance.balance ?: "",
-                                    style = labelLarge,
-                                    maxLines = 1,
-                                    overflow = TextOverflow.Ellipsis,
-                                    color = green
-                                )
-
-                                assetBalance.balanceExchange?.also {
-                                    // Fiat
-                                    Text(
-                                        text = it,
-                                        style = bodyMedium,
-                                        maxLines = 1,
-                                        overflow = TextOverflow.Ellipsis,
-                                        color = whiteMedium,
-                                    )
-                                }
-                            }
+                            ConsistentHeightBox(placeholder = {
+                                BalanceDetails("0", "0")
+                            }, content = {
+                                BalanceDetails(assetBalance.balance, assetBalance.balanceExchange)
+                            })
                         }
                     }
                 }
@@ -133,3 +118,24 @@ fun GreenAsset(
         }
     }
 }
+
+@Composable
+private fun BalanceDetails(assetBalance: String?, fiatAssetBalance: String?) {
+    Column(
+        horizontalAlignment = Alignment.End, verticalArrangement = Arrangement.Center
+    ) {
+        Text(
+            text = assetBalance ?: "", style = labelLarge, maxLines = 1, overflow = TextOverflow.Ellipsis, color = green
+        )
+
+        fiatAssetBalance?.also {
+            Text(
+                text = it,
+                style = bodyMedium,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                color = whiteMedium,
+            )
+        }
+    }
+}

ui-common/src/commonMain/kotlin/com/blockstream/ui/components/ConsistentHeightBox.kt

@@ -0,0 +1,31 @@
+package com.blockstream.ui.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+
+/**
+ * A composable that maintains consistent height across components by using a placeholder layout.
+ * The placeholder establishes the maximum height needed, while the actual content is overlaid on top.
+ *
+ * @param modifier Modifier to be applied to the Box
+ * @param placeholder Composable that defines the maximum height layout (rendered invisibly)
+ * @param content Actual content to be displayed
+ */
+@Composable
+fun ConsistentHeightBox(
+    modifier: Modifier = Modifier,
+    contentAlignment: Alignment = Alignment.Center,
+    placeholder: @Composable () -> Unit,
+    content: @Composable () -> Unit
+) {
+    Box(modifier = modifier, contentAlignment = contentAlignment) {
+        Box(modifier = Modifier.alpha(0f)) {
+            placeholder()
+        }
+
+        content()
+    }
+}