feat(ui): open photo on tap for touch and fix narrow-screen panel

- Touch/pen tap opens the viewer; mouse click still selects, dblclick opens
- Panel and rail emit a single transform utility so the panel actually
  slides in below 1280px (Tailwind v4 utility ordering made the base
  translate-x-full win over the conditional translate-x-0)
- Add touch-action: manipulation to grid cells

frontend/src/lib/components/AppShell.svelte

@@ -175,9 +175,9 @@
 			></button>
 		{/if}
 		<aside
-			class="border-border bg-chrome absolute inset-y-0 left-0 z-40 w-60 -translate-x-full overflow-y-auto border-r transition-transform lg:static lg:z-auto lg:w-[var(--rail-w)] lg:translate-x-0 {railOpen
+			class="border-border bg-chrome absolute inset-y-0 left-0 z-40 w-60 overflow-y-auto border-r transition-transform lg:static lg:z-auto lg:w-[var(--rail-w)] lg:translate-x-0 {railOpen
 				? 'translate-x-0'
-				: ''}"
+				: '-translate-x-full'}"
 			style="--rail-w: {railWidth}px"
 			aria-label="Альбомы"
 		>
@@ -215,9 +215,9 @@
 				onkeydown={(e) => nudge('right', e)}
 			></button>
 			<aside
-				class="border-border bg-chrome absolute inset-y-0 right-0 z-40 w-72 translate-x-full overflow-y-auto border-l transition-transform xl:static xl:z-auto xl:w-[var(--panel-w)] xl:translate-x-0 {panelOpen
+				class="border-border bg-chrome absolute inset-y-0 right-0 z-40 w-72 overflow-y-auto border-l transition-transform xl:static xl:z-auto xl:w-[var(--panel-w)] xl:translate-x-0 {panelOpen
 					? 'translate-x-0'
-					: ''}"
+					: 'translate-x-full'}"
 				style="--panel-w: {panelWidth}px"
 				aria-label="Панель"
 			>

frontend/src/lib/components/PhotoGrid.svelte

@@ -32,6 +32,14 @@
 	const isCursor = (i: number) => cursorIndex === i;
 	const tabIndexFor = (i: number) =>
 		cursorIndex == null ? (i === 0 ? 0 : -1) : isCursor(i) ? 0 : -1;
+
+	let lastPointer = '';
+	function activate(i: number, e: MouseEvent) {
+		const touch = lastPointer === 'touch' || lastPointer === 'pen';
+		lastPointer = '';
+		if (touch) onOpen?.(i);
+		else onSelect?.(i, e);
+	}
 </script>
 
 {#if photos.length === 0}
@@ -48,7 +56,7 @@
 					data-photo-cell
 					tabindex={tabIndexFor(i)}
 					draggable={isSelected(photo.id)}
-					class="border-border bg-bg-muted group relative block aspect-square w-full overflow-hidden rounded-lg border {isSelected(
+					class="border-border bg-bg-muted group relative block aspect-square w-full touch-manipulation overflow-hidden rounded-lg border {isSelected(
 						photo.id
 					)
 						? 'ring-primary ring-2'
@@ -56,8 +64,11 @@
 						? 'outline outline-2 outline-offset-2 outline-text'
 						: ''}"
 					aria-pressed={isSelected(photo.id)}
-					onfocus={() => onCursorFocus?.(i)}
-					onclick={(e) => onSelect?.(i, e)}
+					onpointerdown={(e) => (lastPointer = e.pointerType)}
+					onfocus={() => {
+						if (lastPointer !== 'touch' && lastPointer !== 'pen') onCursorFocus?.(i);
+					}}
+					onclick={(e) => activate(i, e)}
 					ondblclick={() => onOpen?.(i)}
 					ondragstart={(e) => onDragStart?.(i, e)}
 					oncontextmenu={(e) => onContextMenu?.(i, e)}