From 42828434a4260d3ab02592d183bac5eeb68a8862 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 25 Apr 2026 15:03:05 +0200
Subject: [PATCH] fix(picture): lightbox sits above PillNav + tighter meta
 column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two follow-ups on the borderless redesign:

- z-index bumped from `z-50` to `z-[100]`. The `(app)/+layout`'s
  `.bottom-stack` (PillNav, QuickInputBar, sync-status row) sits at
  z-index 90, so Tailwind's `z-50` was leaving the bottom chrome
  poking through the dark backdrop. 100 is the next round number
  above the layout's stack and keeps the lightbox unambiguously on
  top of everything in the (app) tree.

- Meta column tightens from `max-w-md` (~28rem) to `max-w-[14rem]`
  (~224px) so even long prompts hug the right edge instead of
  stretching halfway across the image. The detail row gains
  `flex-wrap: wrap` so model + dimensions + date wrap cleanly when
  they don't fit on one line — `justify-content: flex-end` keeps
  every line right-aligned to the corner.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../picture/components/ImageLightbox.svelte   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/modules/picture/components/ImageLightbox.svelte b/apps/mana/apps/web/src/lib/modules/picture/components/ImageLightbox.svelte
index 9fbd0210b..8254a016d 100644
--- a/apps/mana/apps/web/src/lib/modules/picture/components/ImageLightbox.svelte
+++ b/apps/mana/apps/web/src/lib/modules/picture/components/ImageLightbox.svelte
@@ -60,8 +60,12 @@
 {#if image}
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- z-[100] sits above the layout's `.bottom-stack` (z-index: 90,
+	     hosts PillNav + QuickInputBar + the sync-status row) so the
+	     lightbox actually covers it. Tailwind's `z-50` would have left
+	     the bottom chrome poking through. -->
 	<div
-		class="lightbox-root fixed inset-0 z-50 flex items-center justify-center p-6 sm:p-10"
+		class="lightbox-root fixed inset-0 z-[100] flex items-center justify-center p-6 sm:p-10"
 		onclick={handleBackdropClick}
 		role="dialog"
 		aria-modal="true"
@@ -99,11 +103,14 @@
 			</div>
 		{/if}
 
-		<!-- Metadata: bottom-right, small, grey. Right-aligned so the
-		     longest line (the prompt) wraps naturally toward the image
-		     edge. `pointer-events-none` keeps clicks falling through to
-		     the backdrop dismiss. -->
-		<div class="lightbox-meta pointer-events-none absolute bottom-6 right-6 max-w-md text-right">
+		<!-- Metadata: bottom-right, small, grey. Tight column (max-w
+		     ≈ 14rem) so even long prompts hug the right edge instead of
+		     stretching halfway across the image. Right-aligned so the
+		     wrap stays anchored to the corner. `pointer-events-none`
+		     keeps clicks falling through to the backdrop dismiss. -->
+		<div
+			class="lightbox-meta pointer-events-none absolute bottom-6 right-6 max-w-[14rem] text-right"
+		>
 			<p class="lightbox-meta-prompt">{image.prompt}</p>
 			<div class="lightbox-meta-detail">
 				{#if image.model}<span>{image.model}</span>{/if}
@@ -154,6 +161,7 @@
 	.lightbox-meta-detail {
 		margin-top: 0.25rem;
 		display: flex;
+		flex-wrap: wrap;
 		gap: 0.625rem;
 		justify-content: flex-end;
 		font-size: 0.6875rem;