From 4958548bf8c417afdd07ce84b97e84b5d205923a Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Fri, 25 Apr 2025 15:08:54 -0400
Subject: [PATCH] fix(creator): the album-view was not streching correctly on
 resize

---
 frontend/src/views/creators/AlbumView.vue | 28 +++++++++--------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/creators/AlbumView.vue b/frontend/src/views/creators/AlbumView.vue
index 2b5d451..b08ecf9 100644
--- a/frontend/src/views/creators/AlbumView.vue
+++ b/frontend/src/views/creators/AlbumView.vue
@@ -62,6 +62,16 @@ const displayedImages = computed(() => {
   }
   return images.slice(0, 3); // 3 images on smaller screens
 });
+
+// Add computed property for grid columns based on number of images
+const gridColumns = computed(() => {
+  const count = displayedImages.value.length;
+  if (count === 1) return '1fr';
+  if (count === 2) return 'repeat(2, 1fr)';
+  if (count === 3) return 'repeat(3, 1fr)';
+  if (count === 4) return 'repeat(4, 1fr)';
+  return 'repeat(5, 1fr)';
+});
 </script>
 
 <style scoped>
@@ -71,8 +81,8 @@ const displayedImages = computed(() => {
 
 .image-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
   width: 100%;
+  grid-template-columns: v-bind(gridColumns);
 }
 
 .image-wrapper {
@@ -88,23 +98,7 @@ const displayedImages = computed(() => {
 }
 
 /* Responsive adjustments */
-@media (min-width: 768px) {
-  .image-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
 
-@media (min-width: 1024px) {
-  .image-grid {
-    grid-template-columns: repeat(5, 1fr);
-  }
-}
-
-@media (max-width: 640px) {
-  .image-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
 </style>
 
 <i18n>