From 0a9e5274cf1666c8aba240804725c43130f562e6 Mon Sep 17 00:00:00 2001
From: Iu <iu@prhub.ru>
Date: Tue, 20 Oct 2026 22:06:20 +0300
Subject: [PATCH] =?UTF-8?q?fix(web):=20=D0=BB=D0=B5=D0=BD=D1=82=D0=B0=20?=
 =?UTF-8?q?=D0=BC=D0=B8=D0=BD=D0=B8=D0=B0=D1=82=D1=8E=D1=80=20=D1=81=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=B4=D1=83=D0=B5=D1=82=20=D0=B7=D0=B0=20=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=83=D1=89=D0=B8=D0=BC=20=D1=84=D0=BE=D1=82=D0=BE=20?=
 =?UTF-8?q?=D0=B2=20=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

При переходе стрелками влево/вправо активная миниатюра нижней ленты уходила
за край и оставалась невидимой. Теперь лента прокручивается к текущему фото,
удерживая его плитку в поле зрения.
---
 frontend/src/lib/components/Viewer.svelte | 19 +++++++++++++++++++
 openspec/specs/ui-workspace/spec.md       |  8 +++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/Viewer.svelte b/frontend/src/lib/components/Viewer.svelte
index 163f025..0aa63ca 100644
--- a/frontend/src/lib/components/Viewer.svelte
+++ b/frontend/src/lib/components/Viewer.svelte
@@ -124,6 +124,24 @@
 		return () => document.removeEventListener('fullscreenchange', onFs);
 	});
 
+	$effect(() => {
+		// Лента миниатюр следует за текущим фото: активная плитка всегда в поле зрения.
+		const i = index;
+		const count = photos.length;
+		const strip = bottomEl;
+		if (!strip || !count) return;
+		const cell = strip.querySelectorAll<HTMLElement>('[data-strip-cell]')[i];
+		if (!cell) return;
+		const pad = 8;
+		const cellRect = cell.getBoundingClientRect();
+		const stripRect = strip.getBoundingClientRect();
+		if (cellRect.left < stripRect.left + pad) {
+			strip.scrollLeft -= stripRect.left + pad - cellRect.left;
+		} else if (cellRect.right > stripRect.right - pad) {
+			strip.scrollLeft += cellRect.right - (stripRect.right - pad);
+		}
+	});
+
 	const topClass = $derived(
 		`pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-1 bg-transparent px-2 py-0.5 transition-transform duration-200 ${isFullscreen && !showTop ? '-translate-y-full' : 'translate-y-0'}`
 	);
@@ -554,6 +572,7 @@
 		{#each photos as photo, i (photo.id)}
 			<button
 				type="button"
+				data-strip-cell
 				class="group h-16 w-16 shrink-0 overflow-hidden rounded border {i === index
 					? 'border-primary'
 					: 'border-border'}"
diff --git a/openspec/specs/ui-workspace/spec.md b/openspec/specs/ui-workspace/spec.md
index b778962..23fdcbd 100644
--- a/openspec/specs/ui-workspace/spec.md
+++ b/openspec/specs/ui-workspace/spec.md
@@ -58,7 +58,9 @@ SHALL отображаться вне каркаса, но в общей тем
 лентой миниатюр снизу и панелью метаданных и комментариев. Тот же режим SHALL
 использоваться на публичных share-страницах. Миниатюры нижней ленты SHALL давать обратную связь
 при наведении указателя: изображение SHALL плавно увеличиваться внутри плитки; тот же эффект SHALL
-применяться при фокусе с клавиатуры.
+применяться при фокусе с клавиатуры. Лента SHALL следовать за текущим фото: при переходе
+стрелками или выбором в ленте активная миниатюра SHALL оставаться в поле зрения, а лента —
+прокручиваться к ней.
 
 #### Scenario: Открытие фото
 - **WHEN** пользователь выбирает фото в сетке
@@ -76,6 +78,10 @@ SHALL отображаться вне каркаса, но в общей тем
 - **WHEN** пользователь наводит указатель на миниатюру в нижней ленте
 - **THEN** изображение миниатюры плавно увеличивается внутри плитки
 
+#### Scenario: Лента следует за фото
+- **WHEN** пользователь листает фото стрелками влево/вправо
+- **THEN** лента миниатюр прокручивается так, что активная миниатюра остаётся в поле зрения
+
 ### Requirement: Плотность сетки
 
 Сетка SHALL давать пользователю управлять размером миниатюр: сдвиг регулятора вправо SHALL