feat(web): Make scaling of albums overview more responsive (#1981)

* Make scaling of albums overview more responsive

* Adapt column sizes

* Run prettier

* Use tailwind magic instead of hard-coded breakpoints

web/src/lib/components/album-page/album-card.svelte

@@ -61,7 +61,7 @@
 </script>
 
 <div
-	class="h-[339px] w-[275px] hover:cursor-pointer mt-4 relative"
+	class="hover:cursor-pointer mt-4 relative"
 	on:click={() => dispatchClick('click', album)}
 	on:keydown={() => dispatchClick('click', album)}
 	data-testid="album-card"
@@ -76,7 +76,7 @@
 		<CircleIconButton logo={DotsVertical} size={'20'} hoverColor={'rgba(95,99,104, 0.5)'} />
 	</div>
 
-	<div class={`h-[275px] w-[275px] z-[-1]`}>
+	<div class={`aspect-square z-[-1]`}>
 		<img
 			src={imageData}
 			alt={album.id}

web/src/routes/(user)/albums/+page.svelte

@@ -45,7 +45,7 @@
 	<section class="overflow-y-auto relative immich-scrollbar">
 		<section
 			id="album-content"
-			class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
+			class="relative pt-8 pl-4 pr-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
 		>
 			<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
 				<div>
@@ -70,7 +70,7 @@
 			</div>
 
 			<!-- Album Card -->
-			<div class="flex flex-wrap gap-8">
+			<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
 				{#each $albums as album}
 					{#key album.id}
 						<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>