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

@@ -1054,6 +1054,10 @@ import 'package:openapi/api.dart';
 //defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKey = 'YOUR_API_KEY';
 // uncomment below to setup prefix (e.g. Bearer) for API key, if needed
 //defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKeyPrefix = 'Bearer';
+// TODO Configure API key authorization: api_key
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKey = 'YOUR_API_KEY';
+// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKeyPrefix = 'Bearer';
 // TODO Configure HTTP Bearer authorization: bearer
 // Case 1. Use String Token
 //defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken('YOUR_ACCESS_TOKEN');
@@ -1088,7 +1092,7 @@ Name | Type | Description  | Notes
 
 ### Authorization
 
-[cookie](../README.md#cookie), [bearer](../README.md#bearer)
+[cookie](../README.md#cookie), [api_key](../README.md#api_key), [bearer](../README.md#bearer)
 
 ### HTTP request headers
 

server/immich-openapi-specs.json

@@ -2655,6 +2655,9 @@
           },
           {
             "cookie": []
+          },
+          {
+            "api_key": []
           }
         ]
       }

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)

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)}