fix(frontend): open original only when tapping the preview image

The preview area was one big link, so a click anywhere in it — including
the black letterbox margins — opened the original. Make the link
pointer-events:none and re-enable pointer-events on the image itself, so
"open original" fires only on the image, not the surrounding margins.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/components/file/FileViewer.svelte

@@ -499,13 +499,14 @@
 			</div>
 		{/if}
 
-		<!-- Prev / Next -->
+		<!-- Prev / Next: the whole left/right side of the preview is a tap zone -->
 		{#if prevId}
 			<button
-				class="nav-btn nav-prev"
+				class="nav-zone nav-prev"
 				onclick={() => prevId && onNavigate(prevId)}
 				aria-label="Previous file"
 			>
+				<span class="nav-chip">
 					<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
 						<path
 							d="M11 3L5 9L11 15"
@@ -515,14 +516,16 @@
 							stroke-linejoin="round"
 						/>
 					</svg>
+				</span>
 			</button>
 		{/if}
 		{#if nextId}
 			<button
-				class="nav-btn nav-next"
+				class="nav-zone nav-next"
 				onclick={() => nextId && onNavigate(nextId)}
 				aria-label="Next file"
 			>
+				<span class="nav-chip">
 					<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
 						<path
 							d="M7 3L13 9L7 15"
@@ -532,6 +535,7 @@
 							stroke-linejoin="round"
 						/>
 					</svg>
+				</span>
 			</button>
 		{/if}
 	</div>
@@ -756,15 +760,17 @@
 		overflow: hidden;
 	}
 
-	/* Whole preview area is a link: click opens the original in a new tab. */
+	/* The link fills the area for centring, but only the image itself is
+	   clickable (pointer-events below) — tapping the black margins does nothing,
+	   so "open original" fires only on the preview. */
 	.preview-link {
 		width: 100%;
 		height: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		cursor: zoom-in;
 		text-decoration: none;
+		pointer-events: none;
 	}
 
 	.preview-img {
@@ -772,12 +778,14 @@
 		max-height: 100%;
 		object-fit: contain;
 		display: block;
+		cursor: zoom-in;
+		pointer-events: auto; /* only the image opens the original */
 	}
 
 	.preview-busy {
 		position: absolute;
 		inset: 0;
-		z-index: 2;
+		z-index: 4; /* above the nav zones — an in-flight replace blocks paging */
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -818,33 +826,58 @@
 		background-color: #1a1010;
 	}
 
-	/* ---- Nav buttons ---- */
-	.nav-btn {
+	/* ---- Nav zones ----
+	   Each covers the full-height left/right portion of the preview so paging
+	   only needs a tap on that side, not a precise hit on the arrow. They sit
+	   above the image, so over a full-width image the sides page and the centre
+	   still opens the original. The dark hint gradient shows on hover only, to
+	   keep photos clean on touch where there is no hover. */
+	.nav-zone {
 		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
+		top: 0;
+		bottom: 0;
+		width: 30%;
+		max-width: 220px;
 		border: none;
-		background-color: rgba(0, 0, 0, 0.55);
-		color: #fff;
+		background: none;
+		padding: 0 12px;
 		display: flex;
 		align-items: center;
-		justify-content: center;
 		cursor: pointer;
-		transition: background-color 0.15s;
-	}
-
-	.nav-btn:hover {
-		background-color: rgba(0, 0, 0, 0.8);
+		z-index: 3;
+		-webkit-tap-highlight-color: transparent;
 	}
 
 	.nav-prev {
-		left: 10px;
+		left: 0;
+		justify-content: flex-start;
 	}
 	.nav-next {
-		right: 10px;
+		right: 0;
+		justify-content: flex-end;
+	}
+
+	.nav-prev:hover {
+		background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
+	}
+	.nav-next:hover {
+		background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
+	}
+
+	.nav-chip {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, 0.55);
+		color: #fff;
+		transition: background-color 0.15s;
+	}
+
+	.nav-zone:hover .nav-chip {
+		background-color: rgba(0, 0, 0, 0.8);
 	}
 
 	/* ---- Metadata panel ---- */