From 053104fc50b264c062d79d3858772b238f52e4b0 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Mon, 8 May 2023 14:59:33 -0500
Subject: [PATCH] fix(web): timeline distortion when scrolling due to rerender
 of scrollbar bucket and thumbnail size (#2398)

* fix(web): timeline distortion when scrolling due to rerender of scrollbar bucket and thumbnail size

* fix: test
---
 mobile/openapi/doc/AssetApi.md                | Bin 55199 -> 55523 bytes
 server/immich-openapi-specs.json              |   3 +++
 web/src/api/open-api/api.ts                   |   3 +++
 .../photos-page/asset-date-group.svelte       |   7 -------
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/mobile/openapi/doc/AssetApi.md b/mobile/openapi/doc/AssetApi.md
index 3d12d41d82148d459f715dee08480e261e9c8b6f..fd1338532bee235d70347cb858af1b37d298da60 100644
GIT binary patch
delta 29
ncmV+&0OJ3juLI+;1F%_~vtVYm0<-I#i2}1ef>;5wtD*EY+KLW%

delta 33
rcmV++0N(%Ou>+s41F%_~v*3=50h53h2D1*Ii2}1#TQ>o-@1pcI3uq5s

diff --git a/server/immich-openapi-specs.json b/server/immich-openapi-specs.json
index 788c8258e4..bae89bdb81 100644
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -2655,6 +2655,9 @@
           },
           {
             "cookie": []
+          },
+          {
+            "api_key": []
           }
         ]
       }
diff --git a/web/src/api/open-api/api.ts b/web/src/api/open-api/api.ts
index 0daea79b83..2f89c25fb3 100644
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -4817,6 +4817,9 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
 
             // authentication cookie required
 
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
             // authentication bearer required
             // http bearer authentication required
             await setBearerAuthToObject(localVarHeaderParameter, configuration)
diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
index 065732c096..3b000d6a28 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -108,17 +108,12 @@
 		// Show multi select icon on hover on date group
 		hoveredDateGroup = dateGroupTitle;
 	};
-
-	let clientWidth = 0;
 </script>
 
-<!-- <svelte:window bind:innerWidth={clientWidth} /> -->
-
 <section
 	id="asset-group-by-date"
 	class="flex flex-wrap gap-12 mt-5"
 	bind:clientHeight={actualBucketHeight}
-	bind:clientWidth
 >
 	{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}
 		{@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString(
@@ -165,8 +160,6 @@
 				{#each assetsInDateGroup as asset (asset.id)}
 					<div animate:flip={{ duration: 300 }}>
 						<Thumbnail
-							thumbnailWidth={clientWidth <= 768 ? clientWidth / 4 - 4 : undefined}
-							thumbnailHeight={clientWidth <= 768 ? clientWidth / 4 - 4 : undefined}
 							{asset}
 							{groupIndex}
 							on:click={() => assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)}