From 053a0482b4b0ce9a487baae9daac80eb5d3171e9 Mon Sep 17 00:00:00 2001
From: Sergey Kondrikov <sergey.kondrikov@gmail.com>
Date: Sat, 10 Jun 2023 21:13:06 +0300
Subject: [PATCH] fix(web): Timeline narrow date groups style (#2713)

* Truncate date group title

* Precalculate justified layout width

* Add title to date group title to show when truncated

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../assets/thumbnail/thumbnail.svelte         |  2 +-
 .../photos-page/asset-date-group.svelte       | 28 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index c1108227ac..dd8662172f 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -66,7 +66,7 @@
 	<div
 		style:width="{width}px"
 		style:height="{height}px"
-		class="relative group {disabled
+		class="relative group overflow-hidden {disabled
 			? 'bg-gray-300'
 			: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
 		class:cursor-not-allowed={disabled}
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 e1caa31aa1..5733d73d99 100644
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ b/web/src/lib/components/photos-page/asset-date-group.svelte
@@ -52,15 +52,17 @@
 	$: geometry = (() => {
 		const geometry = [];
 		for (let group of assetsGroupByDate) {
-			geometry.push(
-				justifiedLayout(group.map(getAssetRatio), {
-					boxSpacing: 2,
-					containerWidth: Math.floor(viewportWidth),
-					containerPadding: 0,
-					targetRowHeightTolerance: 0.15,
-					targetRowHeight: 235
-				})
-			);
+			const justifiedLayoutResult = justifiedLayout(group.map(getAssetRatio), {
+				boxSpacing: 2,
+				containerWidth: Math.floor(viewportWidth),
+				containerPadding: 0,
+				targetRowHeightTolerance: 0.15,
+				targetRowHeight: 235
+			});
+			geometry.push({
+				...justifiedLayoutResult,
+				containerWidth: calculateWidth(justifiedLayoutResult.boxes)
+			});
 		}
 		return geometry;
 	})();
@@ -182,6 +184,7 @@
 			<!-- Date group title -->
 			<p
 				class="font-medium text-xs md:text-sm text-immich-fg dark:text-immich-dark-fg mb-2 flex place-items-center h-6"
+				style="width: {geometry[groupIndex].containerWidth}px"
 			>
 				{#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}
 					<div
@@ -198,7 +201,7 @@
 					</div>
 				{/if}
 
-				<span>
+				<span class="truncate" title={dateGroupTitle}>
 					{dateGroupTitle}
 				</span>
 			</p>
@@ -206,9 +209,8 @@
 			<!-- Image grid -->
 			<div
 				class="relative"
-				style="height: {geometry[groupIndex].containerHeight}px;width: {calculateWidth(
-					geometry[groupIndex].boxes
-				)}px"
+				style="height: {geometry[groupIndex].containerHeight}px;width: {geometry[groupIndex]
+					.containerWidth}px"
 			>
 				{#each assetsInDateGroup as asset, index (asset.id)}
 					{@const box = geometry[groupIndex].boxes[index]}