From 5699f2cd5e615c07e844da6d7942a28e1b4b0892 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Sun, 8 Nov 2026 23:38:56 +0000
Subject: [PATCH 1/8] fix(web): give expanded media a Back button

---
 .../chat/ExpandedImageDialog.browser.test.tsx   |  4 +++-
 .../src/components/chat/ExpandedImageDialog.tsx | 17 ++++++++++++-----
 .../AttachmentFilePreview.browser.test.tsx      |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx b/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
index 7287547df71fc..73d5955e9029e 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
@@ -114,7 +114,9 @@ describe("ExpandedImageDialog", () => {
     expect(onClose).not.toHaveBeenCalled();
 
     // Focus returns to the popup's trigger and opens its tooltip; leave it for a plain control.
-    (screen.getByRole("button", { name: "Close image preview" }).element() as HTMLElement).focus();
+    (
+      screen.getByRole("button", { name: "Back, close image preview" }).element() as HTMLElement
+    ).focus();
     await userEvent.keyboard("{Escape}");
     await vi.waitFor(() => expect(onClose).toHaveBeenCalledOnce());
   });
diff --git a/apps/web/src/components/chat/ExpandedImageDialog.tsx b/apps/web/src/components/chat/ExpandedImageDialog.tsx
index dad9280ad6dca..b2829f5703a1e 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.tsx
@@ -1,6 +1,12 @@
 import { memo, useRef, useState, type ReactNode, type KeyboardEvent } from "react";
 import { flushSync } from "react-dom";
-import { ChevronLeftIcon, ChevronRightIcon, XIcon, ImageIcon, TextIcon } from "lucide-react";
+import {
+  ArrowLeftIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ImageIcon,
+  TextIcon,
+} from "lucide-react";
 import { Button } from "../ui/button";
 import { Dialog, DialogPopup, DialogTitle } from "../ui/dialog";
 import type { ExpandedImageItem, ExpandedImagePreview } from "./ExpandedImagePreview";
@@ -188,13 +194,14 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
         <Button
           type="button"
           ref={closeButtonRef}
-          size="icon-sm"
+          size="sm"
           variant="media-close"
-          className="absolute right-0 top-0 z-20"
+          className="absolute left-0 top-0 z-20"
           onClick={close}
-          aria-label={`Close ${mediaLabel} preview`}
+          aria-label={`Back, close ${mediaLabel} preview`}
         >
-          <XIcon />
+          <ArrowLeftIcon aria-hidden="true" />
+          Back
         </Button>
         {preview.images.length > 1 && (
           <Button
diff --git a/apps/web/src/components/files/AttachmentFilePreview.browser.test.tsx b/apps/web/src/components/files/AttachmentFilePreview.browser.test.tsx
index 9d7c2ad1298e1..83055f4ccca45 100644
--- a/apps/web/src/components/files/AttachmentFilePreview.browser.test.tsx
+++ b/apps/web/src/components/files/AttachmentFilePreview.browser.test.tsx
@@ -1417,7 +1417,7 @@ it("toggles a Mermaid attachment between diagram and source through the lazy pre
     expect(image?.alt).toBe("Mermaid diagram");
     expect(image?.naturalWidth).toBeGreaterThan(0);
   });
-  await page.getByRole("button", { name: "Close image preview" }).click();
+  await page.getByRole("button", { name: "Back, close image preview" }).click();
   await vi.waitFor(() => expect(document.querySelector('[role="dialog"]')).toBeNull());
   await screen.getByRole("button", { name: "Show Mermaid source" }).click();
   await vi.waitFor(() => expect(screen.container.querySelector("pre")?.textContent).toBe(text));

From 7a96763317b50e5ab9eac27ff5fa684805ab2a59 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 03:38:09 +0000
Subject: [PATCH 2/8] fix(web): keep media controls below the native titlebar

---
 apps/web/src/components/ui/dialog.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 8af7f6e93724f..fc3e0a30044fc 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -1,8 +1,17 @@
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { useRender } from "@base-ui/react/use-render";
 import { XIcon } from "lucide-react";
-import { type ComponentProps, createContext, type ReactNode, use, useRef, useState } from "react";
+import {
+  type ComponentProps,
+  type CSSProperties,
+  createContext,
+  type ReactNode,
+  use,
+  useRef,
+  useState,
+} from "react";
 import { cn } from "~/lib/utils";
+import { useNativeTitlebarHeight } from "~/lib/windowControlsOverlay";
 import { Button, type ButtonVariant } from "~/components/ui/button";
 import {
   DIALOG_BACKDROP_CLASS,
@@ -139,6 +148,8 @@ function DialogPopup({
       </DialogPrimitive.Popup>
     ),
   });
+  // macOS has no CSS window-controls overlay, so use the platform titlebar height.
+  const nativeTitlebarHeight = useNativeTitlebarHeight();
   return (
     <DialogPortal>
       {/* Media opens from inside other overlays (a composer chip, a popover), so it sits above them. */}
@@ -149,6 +160,11 @@ function DialogPopup({
           variant === "media" &&
             "z-[60] grid-rows-1 place-items-center px-4 pb-6 pt-[calc(var(--native-titlebar-height,0px)+1.5rem)]",
         )}
+        style={
+          variant === "media"
+            ? ({ "--native-titlebar-height": `${nativeTitlebarHeight}px` } as CSSProperties)
+            : undefined
+        }
       >
         {popup}
       </DialogViewport>

From f30db8d6afa4f3a5382a258b813abce45cf3d75e Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 03:53:29 +0000
Subject: [PATCH 3/8] fix(web): preserve media sizing below the native titlebar

---
 apps/web/src/components/ui/dialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index fc3e0a30044fc..cd3362908328e 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -158,11 +158,11 @@ function DialogPopup({
         className={cn(
           bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
           variant === "media" &&
-            "z-[60] grid-rows-1 place-items-center px-4 pb-6 pt-[calc(var(--native-titlebar-height,0px)+1.5rem)]",
+            "z-[60] grid-rows-1 place-items-center px-4 pb-6 pt-[calc(var(--media-dialog-titlebar-height,0px)+1.5rem)] [-webkit-app-region:no-drag]",
         )}
         style={
           variant === "media"
-            ? ({ "--native-titlebar-height": `${nativeTitlebarHeight}px` } as CSSProperties)
+            ? ({ "--media-dialog-titlebar-height": `${nativeTitlebarHeight}px` } as CSSProperties)
             : undefined
         }
       >

From 0d25d2815f1d5bc02d9e7371fffb269ac2a6fc34 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 04:50:01 +0000
Subject: [PATCH 4/8] fix(web): keep media Back visible at high zoom

---
 apps/web/src/components/ui/dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index cd3362908328e..511d22df09a09 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -158,7 +158,7 @@ function DialogPopup({
         className={cn(
           bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
           variant === "media" &&
-            "z-[60] grid-rows-1 place-items-center px-4 pb-6 pt-[calc(var(--media-dialog-titlebar-height,0px)+1.5rem)] [-webkit-app-region:no-drag]",
+            "z-[60] grid-rows-1 place-items-center px-4 pb-6 pt-[min(calc(var(--media-dialog-titlebar-height,0px)+1.5rem),50dvh)] [-webkit-app-region:no-drag]",
         )}
         style={
           variant === "media"

From a7d362692408a848da52bbe7756de69c4b394fa6 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 05:14:50 +0000
Subject: [PATCH 5/8] fix(web): fit media Back in narrow zoomed viewports

---
 apps/web/src/components/chat/ExpandedImageDialog.tsx | 2 +-
 apps/web/src/components/ui/dialog.tsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ExpandedImageDialog.tsx b/apps/web/src/components/chat/ExpandedImageDialog.tsx
index b2829f5703a1e..6c524a7c7485b 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.tsx
@@ -196,7 +196,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
           ref={closeButtonRef}
           size="sm"
           variant="media-close"
-          className="absolute left-0 top-0 z-20"
+          className="absolute left-0 top-0 z-20 max-[8rem]:left-1/2 max-[8rem]:-translate-x-1/2"
           onClick={close}
           aria-label={`Back, close ${mediaLabel} preview`}
         >
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 511d22df09a09..a82dccbdd6a41 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -158,7 +158,7 @@ function DialogPopup({
         className={cn(
           bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
           variant === "media" &&
-            "z-[60] grid-rows-1 place-items-center px-4 pb-6 pt-[min(calc(var(--media-dialog-titlebar-height,0px)+1.5rem),50dvh)] [-webkit-app-region:no-drag]",
+            "z-[60] grid-rows-1 place-items-center px-4 max-[8rem]:px-0 pb-6 pt-[min(calc(var(--media-dialog-titlebar-height,0px)+1.5rem),50dvh)] [-webkit-app-region:no-drag]",
         )}
         style={
           variant === "media"

From 0b4942ff0e83f900d672d5806cc8d6290c756817 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 05:50:38 +0000
Subject: [PATCH 6/8] fix(web): preserve inset for external media controls

---
 apps/web/src/components/chat/ExpandedImageDialog.tsx | 1 +
 apps/web/src/components/ui/dialog.tsx                | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ExpandedImageDialog.tsx b/apps/web/src/components/chat/ExpandedImageDialog.tsx
index 6c524a7c7485b..2d70c5f2ef1dc 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.tsx
@@ -180,6 +180,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
       <DialogPopup
         {...composerFloatingLayerProps}
         variant="media"
+        mediaControlsPlacement="inside"
         showCloseButton={false}
         bottomStickOnMobile={false}
         className="row-start-1 h-full max-h-[92vh] w-[92vw] max-w-[92vw] items-center justify-center overflow-visible [--media-width:92vw] [--media-height:min(calc((100vh-var(--native-titlebar-height,0px))*0.86),calc(100vh-var(--native-titlebar-height,0px)-160px))] sm:[--media-width:calc(92vw-96px)]"
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index a82dccbdd6a41..c028b1de4b2ab 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -112,11 +112,13 @@ function DialogPopup({
   showCloseButton = true,
   bottomStickOnMobile = true,
   variant = "default",
+  mediaControlsPlacement = "outside",
   ...props
 }: DialogPrimitive.Popup.Props & {
   showCloseButton?: boolean;
   bottomStickOnMobile?: boolean;
   variant?: "default" | "media";
+  mediaControlsPlacement?: "inside" | "outside";
 }) {
   const { popupRef, initialFocus } = useDialogActionInitialFocus();
   const popup = useRender({
@@ -158,7 +160,10 @@ function DialogPopup({
         className={cn(
           bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
           variant === "media" &&
-            "z-[60] grid-rows-1 place-items-center px-4 max-[8rem]:px-0 pb-6 pt-[min(calc(var(--media-dialog-titlebar-height,0px)+1.5rem),50dvh)] [-webkit-app-region:no-drag]",
+            "z-[60] grid-rows-1 place-items-center px-4 max-[8rem]:px-0 pb-6 pt-[calc(var(--media-dialog-titlebar-height,0px)+1.5rem)] [-webkit-app-region:no-drag]",
+          variant === "media" &&
+            mediaControlsPlacement === "inside" &&
+            "pt-[min(calc(var(--media-dialog-titlebar-height,0px)+1.5rem),50dvh)]",
         )}
         style={
           variant === "media"

From 1054e5677d748e2b43b16eb918a772bb3aabc218 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 10:39:38 +0000
Subject: [PATCH 7/8] test(web): retain opener focus coverage for media Back

---
 .../src/components/chat/ExpandedImageDialog.browser.test.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx b/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
index 73d5955e9029e..915ed5f929538 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
@@ -53,7 +53,9 @@ describe("ExpandedImageDialog", () => {
       await userEvent.keyboard("{Tab}");
       await userEvent.keyboard("{Enter}");
     }
-    await expect.element(page.getByRole("button", { name: "Close image preview" })).toHaveFocus();
+    await expect
+      .element(page.getByRole("button", { name: "Back, close image preview" }))
+      .toHaveFocus();
     await userEvent.keyboard("{Escape}");
     await expect.element(opener).toHaveFocus();
     expect(opener.element().matches(":focus-visible")).toBe(c.focusVisible);

From 91a53e3250b1d56f51b41ac32432403b7aa38064 Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Sat, 14 Nov 2026 19:49:54 +0000
Subject: [PATCH 8/8] test(web): use media Back in queued image gallery

---
 apps/web/src/components/chat/QueuedRunsControl.browser.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/QueuedRunsControl.browser.test.tsx b/apps/web/src/components/chat/QueuedRunsControl.browser.test.tsx
index 8a1ccccdb28eb..8781327b5e8ad 100644
--- a/apps/web/src/components/chat/QueuedRunsControl.browser.test.tsx
+++ b/apps/web/src/components/chat/QueuedRunsControl.browser.test.tsx
@@ -164,7 +164,7 @@ it.each([false, true])(
     await expect.element(page.getByText("second.png (2/2)", { exact: true })).toBeVisible();
     await page.getByRole("button", { name: "Previous media", exact: true }).click();
     await expect.element(page.getByText("first.png (1/2)", { exact: true })).toBeVisible();
-    await page.getByRole("button", { name: "Close image preview", exact: true }).click();
+    await page.getByRole("button", { name: "Back, close image preview", exact: true }).click();
     await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
     await expect.element(page.getByText("Later", { exact: true })).toBeVisible();
   },