From b52e882e6985cc267a744e7b82755b1746b101e1 Mon Sep 17 00:00:00 2001
From: CJPeckover <cjpeckover@hotmail.ca>
Date: Sat, 7 Jun 2025 00:40:10 -0400
Subject: [PATCH] - sort the selected albums by albumName descending. Allows
 for better stacking when albums with very long names are selected.

---
 .../search-bar/search-albums-section.svelte                 | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte b/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
index ad7b3a0406..cc0d6e7453 100644
--- a/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
@@ -14,11 +14,14 @@
   }
 
   let { selectedAlbums = $bindable() }: Props = $props();
+  
 
   let allAlbums: AlbumResponseDto[] = $state([]);
   let albumMap = $derived(Object.fromEntries(allAlbums.map((album) => [album.id, album])));
   let selectedOption = $state(undefined);
 
+  let sortedSelectedAlbums = $derived(Array.from(selectedAlbums).sort((a, b) => albumMap[b]?.albumName?.length - albumMap[a]?.albumName?.length));
+
   onMount(async () => {
     allAlbums = await getAllAlbums({});
   });
@@ -29,6 +32,7 @@
     }
 
     selectedAlbums.add(option.value);
+
     selectedOption = undefined;
   };
 
@@ -59,7 +63,7 @@
     </form>
 
     <section class="flex flex-wrap pt-2 gap-1">
-      {#each selectedAlbums as albumId (albumId)}
+      {#each sortedSelectedAlbums as albumId (albumId)}
         {@const album = albumMap[albumId]}
         {#if album}
           <div class="flex group transition-all">