From ed76f7a5867e9f8c7dfc1d7307eced147b081ea9 Mon Sep 17 00:00:00 2001
From: SkepticMystic <rossk29@gmail.com>
Date: Sat, 28 Jun 2025 09:39:31 +0000
Subject: [PATCH] Image previews in a v-col

---
 .../pages/g/[groupSlug]/r/create/image.vue    | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/pages/g/[groupSlug]/r/create/image.vue b/frontend/pages/g/[groupSlug]/r/create/image.vue
index 8d5235b42..71d02520e 100644
--- a/frontend/pages/g/[groupSlug]/r/create/image.vue
+++ b/frontend/pages/g/[groupSlug]/r/create/image.vue
@@ -29,15 +29,19 @@
               <v-row style="max-width: 600px;">
                 <v-spacer />
                 <v-col v-for="(imageUrl, index) in uploadedImagesPreviewUrls" :key="index" cols="12">
-                  <ImageCropper :img="imageUrl" cropper-height="50vh" cropper-width="100%"
-                    @save="(croppedImage) => updateUploadedImage(index, croppedImage)" />
+                  <v-row>
+                    <v-col cols="auto" align-self="center">
+                      <ImageCropper :img="imageUrl" cropper-height="100%" cropper-width="100%"
+                        @save="(croppedImage) => updateUploadedImage(index, croppedImage)" />
 
-                  <v-btn color="error" @click="() => clearImage(index)">
-                    <v-icon start>
-                      {{ $globals.icons.close }}
-                    </v-icon>
-                    {{ $t('recipe.remove-image') }}
-                  </v-btn>
+                      <v-btn color="error" @click="() => clearImage(index)">
+                        <v-icon start>
+                          {{ $globals.icons.close }}
+                        </v-icon>
+                        {{ $t('recipe.remove-image') }}
+                      </v-btn>
+                    </v-col>
+                  </v-row>
                 </v-col>
                 <v-spacer />
               </v-row>