From ceb81d00fc758c5259ee258947cf4dbccbafd81c Mon Sep 17 00:00:00 2001
From: Matthias Rupp <matthias.rupp@posteo.de>
Date: Sun, 12 Mar 2023 01:43:54 +0100
Subject: [PATCH] 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 | 4 ++--
 web/src/routes/(user)/albums/+page.svelte           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index 584faf0692..46ca1be04d 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/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}
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 95848d2014..4ff482c986 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/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}`}>