Use constrained LazyVerticalGrid with calculated height for more than 20 images for performance reasons

added vertical spacing for some padding
Fixing scrollable gallery issue

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/ImageGallery.kt

@@ -27,11 +27,18 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
 import com.vitorpamplona.amethyst.commons.richtext.MediaUrlImage
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
+import com.vitorpamplona.amethyst.ui.theme.Size10dp
 import com.vitorpamplona.amethyst.ui.theme.Size5dp
 import kotlinx.collections.immutable.ImmutableList
 
@@ -62,6 +69,8 @@ fun ImageGallery(
     modifier: Modifier = Modifier,
     roundedCorner: Boolean = true,
 ) {
+    // Add vertical padding around the entire gallery for better text separation
+    Column(modifier = modifier.padding(vertical = Size10dp)) {
         when {
             images.isEmpty() -> {
                 // No images to display
@@ -71,7 +80,7 @@ fun ImageGallery(
                 GalleryImage(
                     image = images.first(),
                     allImages = images,
-                modifier = modifier.fillMaxWidth(),
+                    modifier = Modifier.fillMaxWidth(),
                     roundedCorner = roundedCorner,
                     contentScale = ContentScale.FillWidth,
                     accountViewModel = accountViewModel,
@@ -83,7 +92,7 @@ fun ImageGallery(
                     images = images,
                     accountViewModel = accountViewModel,
                     roundedCorner = roundedCorner,
-                modifier = modifier,
+                    modifier = Modifier,
                 )
             }
             images.size == 3 -> {
@@ -92,7 +101,7 @@ fun ImageGallery(
                     images = images,
                     accountViewModel = accountViewModel,
                     roundedCorner = roundedCorner,
-                modifier = modifier,
+                    modifier = Modifier,
                 )
             }
             images.size == 4 -> {
@@ -101,7 +110,7 @@ fun ImageGallery(
                     images = images,
                     accountViewModel = accountViewModel,
                     roundedCorner = roundedCorner,
-                modifier = modifier,
+                    modifier = Modifier,
                 )
             }
             else -> {
@@ -110,10 +119,11 @@ fun ImageGallery(
                     images = images,
                     accountViewModel = accountViewModel,
                     roundedCorner = roundedCorner,
-                modifier = modifier,
+                    modifier = Modifier,
                 )
             }
         }
+    }
 }
 
 @Composable
@@ -227,15 +237,17 @@ private fun ManyImageGallery(
             else -> 4 // 4 columns for 10+ images
         }
 
+    if (images.size <= 20) {
+        // For smaller sets, use non-lazy Column/Row approach (simpler, no constraint issues)
         val rows = (images.size + columns - 1) / columns // Ceiling division
 
         Column(
-        modifier = modifier.aspectRatio(4f / 3f),
+            modifier = modifier,
             verticalArrangement = Arrangement.spacedBy(Size5dp),
         ) {
             repeat(rows) { rowIndex ->
                 Row(
-                modifier = Modifier.weight(1f).fillMaxWidth(),
+                    modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.spacedBy(Size5dp),
                 ) {
                     repeat(columns) { colIndex ->
@@ -244,7 +256,7 @@ private fun ManyImageGallery(
                             GalleryImage(
                                 image = images[imageIndex],
                                 allImages = images,
-                            modifier = Modifier.weight(1f).fillMaxSize(),
+                                modifier = Modifier.weight(1f).aspectRatio(1f),
                                 roundedCorner = roundedCorner,
                                 contentScale = ContentScale.Crop,
                                 accountViewModel = accountViewModel,
@@ -257,4 +269,30 @@ private fun ManyImageGallery(
                 }
             }
         }
+    } else {
+        // For larger sets, use LazyVerticalGrid with explicit height constraint
+        val rows = (images.size + columns - 1) / columns
+        // Calculate height: (image height + spacing) * rows - last spacing
+        // Assume square images with 5dp spacing
+        val gridHeight = (100 * rows + 5 * (rows - 1)).dp
+
+        LazyVerticalGrid(
+            columns = GridCells.Fixed(columns),
+            modifier = modifier.height(gridHeight), // Explicit height constraint
+            verticalArrangement = Arrangement.spacedBy(Size5dp),
+            horizontalArrangement = Arrangement.spacedBy(Size5dp),
+            userScrollEnabled = false,
+        ) {
+            items(images) { image ->
+                GalleryImage(
+                    image = image,
+                    allImages = images,
+                    modifier = Modifier.aspectRatio(1f),
+                    roundedCorner = roundedCorner,
+                    contentScale = ContentScale.Crop,
+                    accountViewModel = accountViewModel,
+                )
+            }
+        }
+    }
 }