From c9ddcd0f607ee81fd3666d4398edf01a16441a16 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 21:21:02 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20viewer=20modal=20=E2=80=94=20haze=20?=
 =?UTF-8?q?background=20through=20to=20the=20image,=20fit-to-view=20at=20z?=
 =?UTF-8?q?oom=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/modal/ImageCanvas.vue |  4 +++-
 frontend/src/components/modal/ImageViewer.vue | 14 +++++++++++---
 frontend/src/components/modal/VideoCanvas.vue |  4 +++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/modal/ImageCanvas.vue b/frontend/src/components/modal/ImageCanvas.vue
index 52cbb17..7cd986a 100644
--- a/frontend/src/components/modal/ImageCanvas.vue
+++ b/frontend/src/components/modal/ImageCanvas.vue
@@ -33,7 +33,9 @@ watch(() => props.src, () => panZoom.reset())
 .fc-canvas {
   flex: 1;
   position: relative;
-  background: rgb(var(--v-theme-background));
+  /* Transparent so the viewer's haze shows through to the image area
+     instead of a solid panel sitting on top of it. */
+  background: transparent;
   overflow: hidden;
   cursor: zoom-in;
   user-select: none;
diff --git a/frontend/src/components/modal/ImageViewer.vue b/frontend/src/components/modal/ImageViewer.vue
index 99ef9e8..195037f 100644
--- a/frontend/src/components/modal/ImageViewer.vue
+++ b/frontend/src/components/modal/ImageViewer.vue
@@ -123,7 +123,11 @@ function isTextEntry(el) {
 <style scoped>
 .fc-viewer {
   position: fixed; inset: 0; z-index: 2000;
-  background: rgba(20, 23, 26, 0.96);
+  /* Obsidian haze (#14171A = 20,23,26) — same palette as TopNav,
+     mid-opacity + blur so the page behind shows through faintly. */
+  background: rgba(20, 23, 26, 0.65);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   outline: none;
   display: flex; flex-direction: column;
 }
@@ -152,8 +156,12 @@ function isTextEntry(el) {
   flex: 1; display: flex; min-height: 0;
 }
 .fc-viewer__media {
-  flex: 1; display: flex; align-items: center; justify-content: center;
-  min-width: 0;
+  /* Let the canvas fill us; the canvas does its own centering. Both
+     min-* are needed so this child can shrink inside its flex parents
+     (without them, max-height/max-width on the <img> have nothing to
+     bound against and the image overflows the viewport). */
+  flex: 1; display: flex;
+  min-width: 0; min-height: 0;
 }
 .fc-viewer__side {
   width: 320px; flex-shrink: 0;
diff --git a/frontend/src/components/modal/VideoCanvas.vue b/frontend/src/components/modal/VideoCanvas.vue
index e79e6da..addc4b1 100644
--- a/frontend/src/components/modal/VideoCanvas.vue
+++ b/frontend/src/components/modal/VideoCanvas.vue
@@ -34,7 +34,9 @@ const playable = computed(() => BROWSER_PLAYABLE.has(props.mime))
 <style scoped>
 .fc-canvas {
   flex: 1;
-  background: rgb(var(--v-theme-background));
+  /* Transparent so the viewer's haze shows through (parallels
+     ImageCanvas — both sit inside ImageViewer's blurred backdrop). */
+  background: transparent;
   display: flex; align-items: center; justify-content: center;
 }
 .fc-canvas__video { max-width: 100%; max-height: 100%; }