feat(creator): introduce Album component and refactor AboutCreator to use it

frontend/src/views/creators/AboutCreator.vue

@@ -94,8 +94,8 @@
           </div>
         </div>
 
-        <!-- Photos Section using CreatorAlbum component -->
+        <!-- Photos Section using Album component -->
-        <CreatorAlbum
+        <Album
             v-if="hasImages || isEditMode"
             :is-edit-mode="isEditMode"
             :images="imageUrls"
@@ -130,7 +130,7 @@ import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useI18n} from 'vue-i18n';
-import CreatorAlbum from './CreatorAlbum.vue';
+import Album from './Album.vue';
 import {buildEmbedUrl, isValidYouTubeUrlOrId, extractVideoId} from '@/utils/youtube';
 
 const {t} = useI18n();
@@ -244,7 +244,7 @@ onMounted(async () => {
   await fetchAlbumData();
 });
 
-// Update images from CreatorAlbum component
+// Update images from Album component
 function updateImages(newImages) {
   imageUrls.value = newImages;
 }
@@ -401,11 +401,12 @@ function cancelEdit() {
 }
 
 .contact-info {
+  @apply text-lg text-justify whitespace-pre-line;
   @apply flex flex-col items-center;
 }
 
 .contact-item {
-  @apply text-lg text-center mb-2 font-semibold;
+  @apply text-lg text-center mb-2;
 }
 
 /* Formatting styles for description */

frontend/src/views/creators/AlbumEditor.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="album-editor">
-    <h2 class="text-xl font-semibold mb-4">{{ t('creator.sections.album.title') }}</h2>
+
+    <h2 class="text-xl font-semibold mb-4">
+      {{ t('creator.sections.album.title') }}
+    </h2>
     
     <!-- Drop zone with photos -->
     <div class="drop-zone" 
          @dragover.prevent
          @drop.prevent="handleDrop"
          @click="triggerFileInput">
+
       <!-- Upload prompt -->
       <div class="drop-zone-content">
         <v-icon size="large">mdi-plus</v-icon>
@@ -68,6 +72,7 @@
         </template>
       </draggable>
     </div>
+    
   </div>
 </template>
 

frontend/src/views/creators/AlbumView.vue

@@ -80,15 +80,12 @@ const gridColumns = computed(() => {
 }
 
 .image-grid {
-  display: grid;
+  @apply w-full grid;
-  width: 100%;
   grid-template-columns: v-bind(gridColumns);
 }
 
 .image-wrapper {
-  position: relative;
+  @apply relative w-full aspect-square;
-  width: 100%;
-  aspect-ratio: 1;
 }
 
 .image {