fix(ui): viewer modal — haze background through to the image, fit-to-view at zoom 1

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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;

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;

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%; }