till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 19:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(picture): lightbox sits above PillNav + tighter meta column

Browse source 
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>
This commit is contained in:
Till JS 2026-04-25 15:03:05 +02:00
parent faa16fa898
commit 42828434a4
1 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
apps/mana/apps/web/src/lib/modules/picture/components/ImageLightbox.svelte
View file

@ -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;