From 8ebe2048b546cebc15ef8186ebb75b9bc03f4804 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 14 Sep 2026 18:08:45 +0200
Subject: [PATCH] web/lightbox: group back and forward buttons & visual nits

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Lightbox.svelte | 28 ++++++++---------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/web/src/lib/components/ui/Lightbox.svelte b/web/src/lib/components/ui/Lightbox.svelte
index fdca289ba..0eabe3ac4 100644
--- a/web/src/lib/components/ui/Lightbox.svelte
+++ b/web/src/lib/components/ui/Lightbox.svelte
@@ -8,9 +8,9 @@
 			flight: "absolute inset-0 flex items-center justify-center p-4 sm:p-14",
 			image: "size-auto max-h-full max-w-full",
 			bar: "pointer-events-none absolute inset-0 flex items-start gap-2 p-3 sm:p-4",
-			badge: "flex h-8 items-center rounded-sm border border-border-default bg-background-default px-2.5 typography-paragraph-small text-foreground-default",
+			badge: "flex min-h-9.5 items-center rounded-sm border border-border-default bg-background-default px-3 typography-paragraph-small text-foreground-default",
 			controls: "pointer-events-auto ml-auto flex items-center gap-2",
-			button: "size-8 px-0"
+			button: "pointer-events-auto min-w-9 px-0"
 		},
 		variants: {
 			zoomed: {
@@ -35,6 +35,7 @@
 	import ZoomOut from "$icon/zoom-out";
 	import { CELL, HOME, Motion, VEIL } from "$lib/motion/value.svelte";
 	import type { LightboxImage } from "$lib/lightbox.svelte";
+	import ButtonGroup from "./ButtonGroup.svelte";
 
 	interface Props {
 		open: boolean;
@@ -501,42 +502,33 @@
 
 		<div class={classes.bar()} style="opacity: {bar.current}">
 			{#if images.length > 1}
-				<p class={classes.badge({ class: "pointer-events-auto" })}>
+				<p class={classes.badge()}>
 					{index + 1} / {images.length}
 				</p>
-			{/if}
-
-			<div class={classes.controls()}>
-				{#if images.length > 1}
+				<ButtonGroup>
 					<Button
-						size="small"
 						class={classes.button()}
 						icon={ChevronLeft}
 						aria-label="Previous image"
 						onclick={() => step(-1)}
 					/>
 					<Button
-						size="small"
 						class={classes.button()}
 						icon={ChevronRight}
 						aria-label="Next image"
 						onclick={() => step(1)}
 					/>
-				{/if}
+				</ButtonGroup>
+			{/if}
+
+			<div class={classes.controls()}>
 				<Button
-					size="small"
 					class={classes.button()}
 					icon={zoomed ? ZoomOut : ZoomIn}
 					aria-label={zoomed ? "Zoom out" : "Zoom in"}
 					onclick={toggleZoom}
 				/>
-				<Button
-					size="small"
-					class={classes.button()}
-					icon={X}
-					aria-label="Close"
-					onclick={onClose}
-				/>
+				<Button class={classes.button()} icon={X} aria-label="Close" onclick={onClose} />
 			</div>
 		</div>
 
-- 
2.51.2