Commit c1ff6ab3d6531e733fb1bca5d4b94f0ff97f7af4 | the-knife

author	maria <maria@kuuro.net> 2026-09-12 19:25:45-03:00
committer	GitHub <noreply@github.com> 2026-09-12 19:25:45-03:00
log	c1ff6ab3d6531e733fb1bca5d4b94f0ff97f7af4
tree	ff3f4d193f184ae2fb0b22a980cd01f2fb31f7da
parent	75d8b132cd0718d8cd703c97d02b143891d80022
signature	Signed by PGP key B5690EEEBB952194

fix(web): move viewer controls outside media and restore arrow navigation (#11470)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

2 files changed, 54 insertions(+), 37 deletions(-)

apps
- web
  - src
    components
    chat
    ExpandedImageDialog.tsx
    ZoomableImage.tsx

apps/web/src/components/chat/ExpandedImageDialog.tsx+42-33

 @@ -1,4 +1,12 @@
-import { memo, useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type KeyboardEvent,
+} from "react";
 import { ChevronLeftIcon, ChevronRightIcon, ImageIcon, TextIcon, XIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import { Dialog, DialogPopup, DialogTitle } from "../ui/dialog";
 @@ -24,7 +32,7 @@ interface ExpandedImageDialogProps {
 }
 const EXPANDED_MEDIA_STATE_CLASS_NAME =
-  "flex aspect-auto h-48 min-h-0 w-[min(92vw,32rem)] flex-col items-center justify-center gap-3 rounded-lg border border-border/70 bg-black p-6 text-center text-sm text-white shadow-2xl";
+  "flex aspect-auto h-48 min-h-0 w-[min(var(--media-width),32rem)] flex-col items-center justify-center gap-3 rounded-lg border border-border/70 bg-black p-6 text-center text-sm text-white shadow-2xl";
 function ExpandedMediaFailure({ children }: { children: ReactNode }) {
   return (
 @@ -51,8 +59,8 @@ function ExpandedVideo({ item }: { readonly item: ExpandedImageItem }) {
       originalUrl={item.originalUrl}
       preload="metadata"
       autoPlay={item.autoPlay ?? true}
-      className="block max-h-[86vh] max-w-[92vw] text-center"
+      className="block max-h-[var(--media-height)] max-w-[var(--media-width)] text-center"
-      videoClassName="aspect-auto max-h-[86vh] w-auto max-w-[92vw] rounded-lg border border-border/70 shadow-2xl"
+      videoClassName="aspect-auto max-h-[var(--media-height)] w-auto max-w-[var(--media-width)] rounded-lg border border-border/70 shadow-2xl"
       stateClassName={EXPANDED_MEDIA_STATE_CLASS_NAME}
       onRetry={asset ? refreshAssetUrl : undefined}
     />
 @@ -111,29 +119,26 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
     };
   }, []);
-  useEffect(() => {
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+    if (event.defaultPrevented || isContextMenuOpen() || event.target instanceof HTMLVideoElement)
-      if (event.defaultPrevented || isContextMenuOpen()) return;
+      return;
-      if (zoomableImageRef.current?.pan(event.key)) {
+    if (zoomableImageRef.current?.pan(event.key)) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      if (preview.images.length <= 1) return;
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        event.stopPropagation();
-        navigateImage(-1);
-        return;
-      }
-      if (event.key !== "ArrowRight") return;
       event.preventDefault();
       event.stopPropagation();
-      navigateImage(1);
+      return;
-    };
+    }
-    window.addEventListener("keydown", onKeyDown);
+    if (preview.images.length <= 1) return;
-    return () => window.removeEventListener("keydown", onKeyDown);
+    if (event.key === "ArrowLeft") {
-  }, [navigateImage, preview.images.length]);
+      event.preventDefault();
+      event.stopPropagation();
+      navigateImage(-1);
+      return;
+    }
+    if (event.key !== "ArrowRight") return;
+    event.preventDefault();
+    event.stopPropagation();
+    navigateImage(1);
+  };
   useEffect(() => {
     const onEscape = (event: globalThis.KeyboardEvent) => {
 @@ -176,9 +181,13 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
         bottomStickOnMobile={false}
         backdropClassName="z-[60]"
         viewportClassName="z-[60] grid-rows-1 place-items-center px-4 py-6 [-webkit-app-region:no-drag]"
-        className="row-start-1 max-h-[92vh] w-auto max-w-[92vw] overflow-visible"
+        className="row-start-1 max-h-[92vh] w-[92vw] max-w-[92vw] items-center overflow-visible [--media-width:92vw] [--media-height:min(86vh,calc(100vh-160px))] sm:[--media-width:calc(92vw-96px)]"
+        onKeyDown={onKeyDown}
         initialFocus={closeButtonRef}
         finalFocus={() => returnFocusTarget}
+        onClick={(event) => {
+          if (event.target === event.currentTarget) onClose();
+        }}
       >
         <DialogTitle className="sr-only">Expanded {mediaLabel} preview</DialogTitle>
         {preview.images.length > 1 && (
 @@ -186,7 +195,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
             type="button"
             size="icon"
             variant="media-navigation"
-            className="left-2 sm:left-6"
+            className="left-0 top-auto -bottom-12 translate-y-0 rounded-full bg-white/10 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
             aria-label="Previous media"
             onClick={() => navigateImage(-1)}
           >
 @@ -194,13 +203,13 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
           </Button>
         )}
         <MediaActions source={actionsSource}>
-          <div className="relative isolate z-10 max-h-[92vh] max-w-[92vw]">
+          <div className="relative isolate z-10 max-h-[92vh] max-w-[var(--media-width)]">
             <Button
               type="button"
               ref={closeButtonRef}
               size="icon-xs"
               variant="media-close"
-              className="absolute right-2 top-2 z-20"
+              className="absolute right-0 -top-10 z-20"
               onClick={onClose}
               aria-label={`Close ${mediaLabel} preview`}
             >
 @@ -212,7 +221,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
               accessibilityDetails ? (
                 <SnapShotAccessibilityData
                   details={accessibilityDetails}
-                  className="h-[min(86vh,40rem)] w-[min(92vw,42rem)] animate-[snap-shot-contents-enter_140ms_ease-out] rounded-lg border border-border/70 bg-background p-4 text-xs leading-5 shadow-2xl motion-reduce:animate-none"
+                  className="h-[min(var(--media-height),40rem)] w-[min(var(--media-width),42rem)] animate-[snap-shot-contents-enter_140ms_ease-out] rounded-lg border border-border/70 bg-background p-4 text-xs leading-5 shadow-2xl motion-reduce:animate-none"
                 />
               ) : null
             ) : item.src === null || failedImageSrc === item.src ? (
 @@ -233,8 +242,8 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
                 onError={() => setFailedImageSrc(item.src)}
               />
             )}
-            <div className="mt-2 flex max-w-[92vw] items-center justify-center gap-1.5 text-xs text-white/80">
+            <div className="mt-2 flex max-w-[var(--media-width)] items-center justify-center gap-1.5 text-xs text-white/80">
-              <span className="truncate">
+              <span className="truncate" aria-live="polite" aria-atomic="true">
                 {item.name}
                 {preview.images.length > 1 ? ` (${index + 1}/${preview.images.length})` : ""}
               </span>
 @@ -273,7 +282,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
             type="button"
             size="icon"
             variant="media-navigation"
-            className="right-2 sm:right-6"
+            className="right-0 top-auto -bottom-12 translate-y-0 rounded-full bg-white/10 sm:top-1/2 sm:bottom-auto sm:-translate-y-1/2"
             aria-label="Next media"
             onClick={() => navigateImage(1)}
           >

apps/web/src/components/chat/ZoomableImage.tsx+12-4

 @@ -44,10 +44,10 @@ export function ZoomableImage({
   } | null>(null);
   const suppressClickRef = useRef(false);
   const [dragging, setDragging] = useState(false);
-  const maxHeight = Math.max(1, Math.min(windowSize.height * 0.86, windowSize.height - 80));
+  const maxHeight = Math.max(1, Math.min(windowSize.height * 0.86, windowSize.height - 160));
   const fit = Math.min(
     1,
-    (windowSize.width * 0.92) / (naturalSize.width || 1),
+    (windowSize.width * 0.92 - (windowSize.width >= 640 ? 96 : 0)) / (naturalSize.width || 1),
     maxHeight / (naturalSize.height || 1),
   );
   const width = naturalSize.width * fit * zoom;
 @@ -59,6 +59,12 @@ export function ZoomableImage({
       pan(key) {
         const viewport = viewportRef.current;
         if (!viewport || zoomRef.current <= 1) return false;
+        // A vertical scrollbar alone must not swallow gallery navigation.
+        if (
+          (key === "ArrowLeft" || key === "ArrowRight") &&
+          viewport.scrollWidth <= viewport.offsetWidth
+        )
+          return false;
         switch (key) {
           case "ArrowLeft":
             viewport.scrollLeft -= 40;
 @@ -144,7 +150,7 @@ export function ZoomableImage({
         aria-label={`${name}, zoomable image`}
         aria-description="Click to zoom in or return to fit. Scroll to zoom, drag to pan. Use Enter to toggle zoom, plus or minus to zoom, and 0 to fit."
         tabIndex={0}
-        className="max-w-[92vw] overflow-auto overscroll-contain rounded-lg bg-background shadow-2xl ring-1 ring-border/70 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="max-w-[var(--media-width)] overflow-auto overscroll-contain rounded-lg bg-background shadow-2xl ring-1 ring-border/70 outline-none focus-visible:ring-2 focus-visible:ring-ring"
         style={{
           width: width || undefined,
           height: height || undefined,
 @@ -221,7 +227,9 @@ export function ZoomableImage({
           alt={name}
           draggable={false}
           className="block max-w-none select-none"
-          style={naturalSize.width ? { width, height } : { maxWidth: "92vw", maxHeight }}
+          style={
+            naturalSize.width ? { width, height } : { maxWidth: "var(--media-width)", maxHeight }
+          }
           onLoad={(event) => {
             setNaturalSize({
               width: event.currentTarget.naturalWidth,