feat: photo multiselect, move/copy, trash and compact chrome

- backend: soft delete + trash (photos.deleted_at, migration 000005), GET /trash, restore, permanent delete with storage-key refcount (S3 objects removed only when no other album references them); batch endpoints photo-batch/{delete,move,copy} - metadata only, copies clone rows sharing storage keys
- frontend: Ctrl/Shift multiselect; right-panel 'Действия' as icon text rows (Открыть (просмотр), Переместить, Копировать, Удалить); drag selected photos onto rail album -> TransferDialog; /trash route; trash entry as last item in the left rail; empty right panel hidden on overview
- frontend: compact top bars (app header and viewer), compact theme switcher
- openspec: sync lightroom-workspace-ui artifacts (photos/ui-workspace specs, design #20-24, tasks 9.11-9.17)

frontend/src/lib/components/AlbumPanel.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { api } from '$lib/api';
+	import { goto } from '$app/navigation';
+	import { api, photosApi } from '$lib/api';
 	import Icon from './Icon.svelte';
 	import CoverPicker from './CoverPicker.svelte';
 	import Comments from './Comments.svelte';
+	import ConfirmDialog from './ConfirmDialog.svelte';
 	import PanelSection from './PanelSection.svelte';
 	import PhotoInfoSettingsDialog from './PhotoInfoSettingsDialog.svelte';
 	import { albums } from '$lib/stores/albums.svelte';
 	import { auth } from '$lib/stores/auth.svelte';
 	import { selection } from '$lib/stores/selection.svelte';
+	import { transfer } from '$lib/stores/transfer.svelte';
 	import { buildExifRows, EXIF_BASE, EXIF_CATALOG, EXIF_LABELS } from '$lib/exif';
 	import type { Album, Photo, Preferences } from '$lib/types';
 
@@ -26,7 +29,8 @@
 	let savingName = $state(false);
 	let nameError = $state('');
 
-	const selectedPhoto = $derived(selection.albumId === albumId ? selection.photo : null);
+	const selectedItems = $derived(selection.albumId === albumId ? selection.items : []);
+	const selectedPhoto = $derived(selectedItems.length === 1 ? selectedItems[0] : null);
 	const panelPhoto = $derived(photoId ? photo : selectedPhoto);
 
 	const canEdit = $derived(role === 'owner' || role === 'admin');
@@ -54,6 +58,26 @@
 	let settingsOpen = $state(false);
 	let showAll = $state(false);
 	let savingPrefs = $state(false);
+	let pendingDeleteSelected = $state(false);
+	let deletingSelected = $state(false);
+
+	async function deleteSelected() {
+		deletingSelected = true;
+		try {
+			await photosApi.deleteBatch(selection.ids);
+			selection.clear();
+			pendingDeleteSelected = false;
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			deletingSelected = false;
+		}
+	}
+
+	function openSelected() {
+		const first = selectedItems[0];
+		if (first) goto(`/albums/${albumId}/photos/${first.id}`);
+	}
 
 	async function savePreferences(next: Preferences) {
 		savingPrefs = true;
@@ -105,7 +129,7 @@
 
 	$effect(() => {
 		// сброс временного состояния панели при выборе другого фото в сетке
-		selectedPhoto?.id;
+		selection.ids.join(',');
 		editingName = false;
 		nameError = '';
 		showAll = false;
@@ -129,7 +153,7 @@
 				body: { original_filename: nameDraft.trim() }
 			});
 			photo = data.photo;
-			if (selectedPhoto?.id === data.photo.id) selection.select(albumId, data.photo);
+			if (selectedItems.some((p) => p.id === data.photo.id)) selection.replace(data.photo);
 			editingName = false;
 		} catch (e) {
 			nameError = (e as Error).message;
@@ -169,8 +193,45 @@
 	const metaRow = 'text-text-muted flex justify-between gap-2 py-0.5 text-xs';
 </script>
 
+{#snippet selectionActions()}
+	<div class="border-border border-b p-4">
+		<p class="text-text-subtle mb-1 text-xs font-semibold tracking-wide uppercase">Действия</p>
+		<nav class="space-y-0.5">
+			<button type="button" class={navLink} onclick={openSelected}>
+				<Icon name="image" class="size-4" />
+				Открыть (просмотр)
+			</button>
+			<button
+				type="button"
+				class={navLink}
+				onclick={() => transfer.start(selection.ids, null, 'move')}
+			>
+				<Icon name="arrow_back" class="size-4" />
+				Переместить
+			</button>
+			<button
+				type="button"
+				class={navLink}
+				onclick={() => transfer.start(selection.ids, null, 'copy')}
+			>
+				<Icon name="content_copy" class="size-4" />
+				Копировать
+			</button>
+			<button
+				type="button"
+				class="text-danger hover:bg-bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
+				onclick={() => (pendingDeleteSelected = true)}
+			>
+				<Icon name="delete" class="size-4" />
+				Удалить
+			</button>
+		</nav>
+	</div>
+{/snippet}
+
 {#if panelPhoto}
 		{@const p = panelPhoto}
+		{#if !photoId}{@render selectionActions()}{/if}
 		<div>
 			<div class="p-4">
 				{#if editingName}
@@ -293,6 +354,8 @@
 				onClose={() => (settingsOpen = false)}
 			/>
 		{/if}
+{:else if !photoId && selectedItems.length > 1}
+	{@render selectionActions()}
 {:else if album && !photoId}
 	<div>
 		<PanelSection id="album-cover" title="Обложка">
@@ -365,3 +428,14 @@
 		/>
 	{/if}
 {/if}
+
+{#if pendingDeleteSelected}
+	<ConfirmDialog
+		title="Удалить выбранные фото?"
+		message="{selectedItems.length} фото будут перемещены в корзину."
+		confirmLabel="Удалить"
+		busy={deletingSelected}
+		onConfirm={deleteSelected}
+		onClose={() => (pendingDeleteSelected = false)}
+	/>
+{/if}

frontend/src/lib/components/AlbumRail.svelte

@@ -5,9 +5,36 @@
 	import CreateAlbumDialog from './CreateAlbumDialog.svelte';
 	import { albums } from '$lib/stores/albums.svelte';
 	import { auth } from '$lib/stores/auth.svelte';
+	import { transfer } from '$lib/stores/transfer.svelte';
 
 	const activeId = $derived($page.params.id ?? '');
+	const onTrash = $derived($page.url.pathname === '/trash');
 	let creating = $state(false);
+	let dropId = $state<string | null>(null);
+
+	function onDragOver(ev: DragEvent, albumId: string) {
+		if (!ev.dataTransfer?.types.includes('application/x-galo-photos')) return;
+		ev.preventDefault();
+		ev.dataTransfer.dropEffect = 'move';
+		dropId = albumId;
+	}
+
+	function onDragLeave(albumId: string) {
+		if (dropId === albumId) dropId = null;
+	}
+
+	function onDrop(ev: DragEvent, albumId: string) {
+		dropId = null;
+		const raw = ev.dataTransfer?.getData('application/x-galo-photos');
+		if (!raw) return;
+		ev.preventDefault();
+		try {
+			const ids = JSON.parse(raw) as string[];
+			transfer.start(ids, albumId);
+		} catch {
+			/* ignore */
+		}
+	}
 
 	$effect(() => {
 		if (auth.isAuthenticated && !albums.loaded) albums.load();
@@ -42,11 +69,16 @@
 				<li>
 					<a
 						href="/albums/{album.id}"
-						class="flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors {album.id ===
+						class="flex items-center gap-2.5 rounded-md border px-2 py-1.5 text-sm transition-colors {album.id ===
 						activeId
 							? 'bg-bg-muted text-text'
-							: 'text-text-muted hover:bg-bg-muted hover:text-text'}"
+							: 'text-text-muted hover:bg-bg-muted hover:text-text'} {dropId === album.id
+							? 'border-primary ring-primary ring-2'
+							: 'border-transparent'}"
 						aria-current={album.id === activeId ? 'page' : undefined}
+						ondragover={(e) => onDragOver(e, album.id)}
+						ondragleave={() => onDragLeave(album.id)}
+						ondrop={(e) => onDrop(e, album.id)}
 					>
 						<span
 							class="bg-bg-muted border-border flex size-9 shrink-0 items-center justify-center overflow-hidden rounded border"
@@ -69,6 +101,25 @@
 		</ul>
 	{/if}
 
+	{#if auth.isAuthenticated}
+		<div class="border-border mt-auto border-t p-2">
+			<a
+				href="/trash"
+				class="flex items-center gap-2.5 rounded-md border px-2 py-1.5 text-sm transition-colors {onTrash
+					? 'bg-bg-muted text-text border-transparent'
+					: 'text-text-muted hover:bg-bg-muted hover:text-text border-transparent'}"
+				aria-current={onTrash ? 'page' : undefined}
+			>
+				<span
+					class="bg-bg-muted border-border flex size-9 shrink-0 items-center justify-center overflow-hidden rounded border"
+				>
+					<Icon name="delete" class="size-4 text-text-subtle" />
+				</span>
+				<span class="truncate">Корзина</span>
+			</a>
+		</div>
+	{/if}
+
 	{#if creating}
 		<CreateAlbumDialog
 			onClose={() => (creating = false)}

frontend/src/lib/components/AppShell.svelte

@@ -11,9 +11,10 @@
 		children: Snippet;
 		rail?: Snippet;
 		panel?: Snippet;
+		panelVisible?: boolean;
 	}
 
-	let { children, rail, panel }: Props = $props();
+	let { children, rail, panel, panelVisible = true }: Props = $props();
 
 	let railOpen = $state(false);
 	let panelOpen = $state(false);
@@ -101,40 +102,40 @@
 
 <div class="bg-canvas text-text flex h-screen flex-col overflow-hidden">
 	<header
-		class="border-border bg-chrome flex shrink-0 items-center justify-between gap-3 border-b px-3 py-2.5 sm:px-4"
+		class="border-border bg-chrome flex shrink-0 items-center justify-between gap-2 border-b px-2 py-0.5 sm:px-3"
 	>
-		<div class="flex min-w-0 items-center gap-2">
+		<div class="flex min-w-0 items-center gap-1">
 			<button
 				type="button"
-				class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5 lg:hidden"
+				class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1 lg:hidden"
 				aria-label="Альбомы"
 				title="Альбомы"
 				onclick={() => (railOpen = true)}
 			>
-				<Icon name="menu" />
+				<Icon name="menu" class="size-4" />
 			</button>
-			<a href="/" class="inline-flex items-center gap-2 truncate text-lg font-semibold">
-				<Icon name="photo_camera" />
+			<a href="/" class="inline-flex items-center gap-1.5 truncate text-sm font-semibold">
+				<Icon name="photo_camera" class="size-4" />
 				Galo
 			</a>
 		</div>
-		<div class="flex items-center gap-2 sm:gap-3">
-			{#if panel}
+		<div class="flex items-center gap-1 sm:gap-1.5">
+			{#if panel && panelVisible}
 				<button
 					type="button"
-					class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5 xl:hidden"
+					class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1 xl:hidden"
 					aria-label="Панель"
 					title="Панель"
-					onclick={() => (panelOpen = true)}
-				>
-					<Icon name="wallpaper" />
-				</button>
+				onclick={() => (panelOpen = true)}
+			>
+				<Icon name="wallpaper" class="size-4" />
+			</button>
 			{/if}
 			{#if auth.isAuthenticated}
-				<span class="text-text-muted hidden text-sm sm:inline">{auth.user?.name ?? ''}</span>
+				<span class="text-text-muted hidden text-xs sm:inline">{auth.user?.name ?? ''}</span>
 				<button
 					type="button"
-					class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
+					class="text-text-muted hover:text-text inline-flex items-center gap-1 text-xs"
 					onclick={logout}
 				>
 					<Icon name="logout" class="size-4" />
@@ -143,7 +144,7 @@
 			{:else}
 				<a
 					href="/login"
-					class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
+					class="text-text-muted hover:text-text inline-flex items-center gap-1 text-xs"
 				>
 					<Icon name="login" class="size-4" />
 					<span class="hidden sm:inline">Войти</span>
@@ -152,13 +153,13 @@
 			<ThemeSwitcher />
 			<button
 				type="button"
-				class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5"
+				class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
 				aria-label={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
 				title={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
 				aria-pressed={isFullscreen}
 				onclick={toggleFullscreen}
 			>
-				<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} />
+				<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} class="size-4" />
 			</button>
 		</div>
 	</header>
@@ -195,7 +196,7 @@
 			{@render children()}
 		</main>
 
-		{#if panel}
+		{#if panel && panelVisible}
 			{#if panelOpen}
 				<button
 					type="button"

frontend/src/lib/components/PhotoGrid.svelte

@@ -5,12 +5,15 @@
 
 	interface Props {
 		photos: Photo[];
-		selectedId?: string | null;
-		onSelect?: (index: number) => void;
+		selectedIds?: string[];
+		onSelect?: (index: number, event: MouseEvent) => void;
 		onOpen?: (index: number) => void;
+		onDragStart?: (index: number, event: DragEvent) => void;
 	}
 
-	let { photos, selectedId = null, onSelect, onOpen }: Props = $props();
+	let { photos, selectedIds = [], onSelect, onOpen, onDragStart }: Props = $props();
+
+	const isSelected = (id: string) => selectedIds.includes(id);
 </script>
 
 {#if photos.length === 0}
@@ -24,13 +27,16 @@
 			<li>
 				<button
 					type="button"
-					class="border-border bg-bg-muted group relative block aspect-square w-full overflow-hidden rounded-lg border {photo.id ===
-					selectedId
+					draggable={isSelected(photo.id)}
+					class="border-border bg-bg-muted group relative block aspect-square w-full overflow-hidden rounded-lg border {isSelected(
+						photo.id
+					)
 						? 'ring-primary ring-2'
 						: ''}"
-					aria-pressed={photo.id === selectedId}
-					onclick={() => onSelect?.(i)}
+					aria-pressed={isSelected(photo.id)}
+					onclick={(e) => onSelect?.(i, e)}
 					ondblclick={() => onOpen?.(i)}
+					ondragstart={(e) => onDragStart?.(i, e)}
 				>
 					{#if photo.thumb_url}
 						<img
@@ -38,7 +44,7 @@
 							alt={photo.original_filename}
 							loading="lazy"
 							decoding="async"
-							class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
+							class="pointer-events-none h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
 						/>
 					{:else}
 						<span class="text-text-subtle flex h-full w-full items-center justify-center text-xs">

frontend/src/lib/components/ThemeSwitcher.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import IconButton from './IconButton.svelte';
+	import Icon from './Icon.svelte';
 	import type { IconName } from '$lib/icons/registry';
 	import { theme, type Theme } from '$lib/stores/theme.svelte';
 
@@ -12,18 +12,23 @@
 </script>
 
 <div
-	class="border-border bg-bg-elevated inline-flex gap-1 rounded-lg border p-1"
+	class="border-border bg-bg-elevated inline-flex items-center gap-0 rounded-md border p-0.5"
 	role="group"
 	aria-label="Theme"
 >
 	{#each options as option (option.value)}
-		<IconButton
-			name={option.icon}
-			label={option.label}
-			active={theme.current === option.value}
-			pressed={theme.current === option.value}
-			class="px-2 py-1 text-sm"
+		<button
+			type="button"
+			class="inline-flex items-center justify-center rounded p-0.5 transition-colors {theme.current ===
+			option.value
+				? 'bg-primary text-primary-fg'
+				: 'text-text-muted hover:bg-bg-muted hover:text-text'}"
+			aria-label={option.label}
+			title={option.label}
+			aria-pressed={theme.current === option.value}
 			onclick={() => theme.set(option.value)}
-		/>
+		>
+			<Icon name={option.icon} class="size-4" />
+		</button>
 	{/each}
 </div>

frontend/src/lib/components/TransferDialog.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import { portal } from '$lib/actions/portal';
+	import { api } from '$lib/api';
+	import { albums } from '$lib/stores/albums.svelte';
+	import { selection } from '$lib/stores/selection.svelte';
+	import { transfer, type TransferAction } from '$lib/stores/transfer.svelte';
+
+	let targetId = $state('');
+	let action = $state<TransferAction>('move');
+	let busy = $state(false);
+	let error = $state('');
+
+	$effect(() => {
+		if (transfer.open) {
+			targetId = transfer.targetId ?? '';
+			action = transfer.action ?? 'move';
+			error = '';
+		}
+	});
+
+	$effect(() => {
+		if (transfer.open) albums.load();
+	});
+
+	async function confirm() {
+		if (!targetId || busy) return;
+		busy = true;
+		error = '';
+		try {
+			const body = { ids: transfer.ids, album_id: targetId };
+			if (action === 'move') await api('/photo-batch/move', { method: 'POST', body });
+			else await api('/photo-batch/copy', { method: 'POST', body });
+			selection.clear();
+			transfer.close();
+			albums.load();
+		} catch (e) {
+			error = (e as Error).message;
+		} finally {
+			busy = false;
+		}
+	}
+
+	function onKey(ev: KeyboardEvent) {
+		if (ev.key === 'Escape' && !busy) transfer.close();
+	}
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+{#if transfer.open}
+	<div
+		use:portal
+		class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
+		role="dialog"
+		aria-modal="true"
+		aria-label="Перенос или копирование"
+		tabindex="-1"
+		onclick={(e) => {
+			if (e.target === e.currentTarget && !busy) transfer.close();
+		}}
+		onkeydown={onKey}
+	>
+		<div class="border-border bg-bg-elevated flex max-h-[85vh] w-full max-w-md flex-col rounded-xl border">
+			<div class="border-border flex items-center justify-between border-b px-5 py-3">
+				<h2 class="text-text text-base font-semibold">
+					{action === 'move' ? 'Переместить' : 'Копировать'} {transfer.ids.length} фото
+				</h2>
+				<button
+					type="button"
+					class="text-text-muted hover:text-text inline-flex size-7 items-center justify-center rounded"
+					aria-label="Закрыть"
+					onclick={() => transfer.close()}
+				>
+					<Icon name="close" class="size-4" />
+				</button>
+			</div>
+
+			<div class="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-4">
+				<div class="border-border inline-flex rounded-lg border p-0.5">
+					<button
+						type="button"
+						class="rounded-md px-3 py-1.5 text-sm {action === 'move'
+							? 'bg-primary text-primary-fg'
+							: 'text-text-muted hover:text-text'}"
+						onclick={() => (action = 'move')}
+					>
+						Переместить
+					</button>
+					<button
+						type="button"
+						class="rounded-md px-3 py-1.5 text-sm {action === 'copy'
+							? 'bg-primary text-primary-fg'
+							: 'text-text-muted hover:text-text'}"
+						onclick={() => (action = 'copy')}
+					>
+						Копировать
+					</button>
+				</div>
+
+				<div>
+					<p class="text-text-muted mb-1.5 text-xs">Альбом</p>
+					{#if albums.list.length === 0}
+						<p class="text-text-subtle text-sm">Нет доступных альбомов.</p>
+					{:else}
+						<ul class="max-h-56 space-y-1 overflow-y-auto">
+							{#each albums.list as album (album.id)}
+								<li>
+									<button
+										type="button"
+										class="flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-sm {targetId ===
+										album.id
+											? 'border-primary bg-bg-muted text-text'
+											: 'border-border text-text-muted hover:bg-bg-muted hover:text-text'}"
+										aria-pressed={targetId === album.id}
+										onclick={() => (targetId = album.id)}
+									>
+										<span
+											class="bg-bg-muted border-border flex size-8 shrink-0 items-center justify-center overflow-hidden rounded border"
+										>
+											{#if album.cover_thumb_url}
+												<img src={album.cover_thumb_url} alt="" class="h-full w-full object-cover" />
+											{:else}
+												<Icon name="image" class="size-4 text-text-subtle" />
+											{/if}
+										</span>
+										<span class="truncate">{album.title}</span>
+									</button>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+
+				{#if error}<p class="text-danger text-sm">{error}</p>{/if}
+			</div>
+
+			<div class="border-border flex justify-end gap-2 border-t px-5 py-3">
+				<button
+					type="button"
+					class="border-border text-text hover:bg-bg-muted rounded-lg border px-4 py-2 text-sm"
+					onclick={() => transfer.close()}
+				>
+					Отмена
+				</button>
+				<button
+					type="button"
+					disabled={busy || !targetId}
+					class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm disabled:opacity-50"
+					onclick={confirm}
+				>
+					{busy ? 'Обработка…' : action === 'move' ? 'Переместить' : 'Копировать'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

frontend/src/lib/components/Viewer.svelte

@@ -99,8 +99,8 @@
 
 	const topClass = $derived(
 		isFullscreen
-			? `border-border bg-chrome absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-2 border-b px-3 py-2 transition-transform duration-200 ${showTop ? 'translate-y-0' : '-translate-y-full'}`
-			: 'border-border bg-chrome flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2'
+			? `border-border bg-chrome absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-1 border-b px-2 py-0.5 transition-transform duration-200 ${showTop ? 'translate-y-0' : '-translate-y-full'}`
+			: 'border-border bg-chrome flex shrink-0 items-center justify-between gap-1 border-b px-2 py-0.5'
 	);
 	const bottomClass = $derived(
 		isFullscreen
@@ -289,22 +289,21 @@
 	}
 
 	const btn =
-		'border-border text-text hover:bg-bg-muted inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm';
-	const dangerBtn =
-		'border-border text-danger hover:bg-bg-muted inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm';
+		'text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1';
+	const dangerBtn = 'text-danger hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1';
 </script>
 
 <svelte:window onkeydown={onKey} onmousemove={onWinMouseMove} />
 
 <div bind:this={viewerEl} class="bg-canvas relative flex h-full flex-col overflow-hidden">
 	<div bind:this={topEl} class={topClass}>
-		<div class="flex items-center gap-2">
+		<div class="flex items-center gap-1">
 			<button type="button" class={btn} aria-label="Назад" title="Назад" onclick={onClose}>
-				<Icon name="arrow_back" />
+				<Icon name="arrow_back" class="size-4" />
 			</button>
-			<span class="text-text-muted text-sm">{index + 1} / {photos.length}</span>
+			<span class="text-text-muted text-xs">{index + 1} / {photos.length}</span>
 		</div>
-		<div class="flex items-center gap-2">
+		<div class="flex items-center gap-1">
 			<button
 				type="button"
 				class={btn}
@@ -315,7 +314,7 @@
 				aria-pressed={isFullscreen}
 				onclick={toggleViewerFullscreen}
 			>
-				<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} />
+				<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} class="size-4" />
 			</button>
 			{#if fresh?.download_url}
 				<a