fix(creator): the album-view was not streching correctly on resize

This commit is contained in:
2025-04-25 15:08:54 -04:00
parent e394c346ae
commit 4958548bf8

View File

@@ -62,6 +62,16 @@ const displayedImages = computed(() => {
} }
return images.slice(0, 3); // 3 images on smaller screens 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> </script>
<style scoped> <style scoped>
@@ -71,8 +81,8 @@ const displayedImages = computed(() => {
.image-grid { .image-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%; width: 100%;
grid-template-columns: v-bind(gridColumns);
} }
.image-wrapper { .image-wrapper {
@@ -88,23 +98,7 @@ const displayedImages = computed(() => {
} }
/* Responsive adjustments */ /* 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> </style>
<i18n> <i18n>