From 83e6acc34dac3fe2318124212df3ca0a55d4e3a4 Mon Sep 17 00:00:00 2001
From: German Khokhlov <ouchlock@gmail.com>
Date: Thu, 8 Oct 2026 16:21:49 +0400
Subject: [PATCH] fix(street-level): Esc shrinks the iPhone popover photo
 instead of collapsing the panel

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/ui/streetLevelControls.js       | 10 +++++++++-
 src/ui/streetLevelControls.test.mjs | 23 ++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/ui/streetLevelControls.js b/src/ui/streetLevelControls.js
index 643a993de..5988963ab 100644
--- a/src/ui/streetLevelControls.js
+++ b/src/ui/streetLevelControls.js
@@ -120,10 +120,18 @@ export class StreetLevelControls {
       this.listen(el.viewerExpand, 'click', () => this._toggleExpanded());
       if (this._expandMode === 'fullscreen')
         this.listen(document, 'fullscreenchange', () => this._syncExpanded());
-      else
+      else {
         this.listen(el.viewerWrap, 'toggle', (event) =>
           this._onPopoverToggle(event),
         );
+        // Esc shrinks the photo before the panel's own Esc can collapse it.
+        this.listen(el.viewerWrap, 'keydown', (event) => {
+          if (event.key !== 'Escape' || !this.isViewerExpanded()) return;
+          event.preventDefault();
+          event.stopPropagation();
+          this._exitExpanded();
+        });
+      }
     } else setProp(el.viewerExpand, 'hidden', true);
     for (const button of el.renderButtons) {
       this.listen(button, 'click', () => {
diff --git a/src/ui/streetLevelControls.test.mjs b/src/ui/streetLevelControls.test.mjs
index 92df07f1c..3d04a3bbc 100644
--- a/src/ui/streetLevelControls.test.mjs
+++ b/src/ui/streetLevelControls.test.mjs
@@ -136,9 +136,17 @@ class FakeNode {
       target: this,
       key: event.key,
       newState: event.newState,
+      stopped: false,
       preventDefault() {},
+      stopPropagation() {
+        this.stopped = true;
+      },
     };
-    for (let node = this; node; node = event.bubbles ? node.parent : null)
+    for (
+      let node = this;
+      node && !delivered.stopped;
+      node = event.bubbles ? node.parent : null
+    )
       for (const listener of [...(node.listeners.get(event.type) || [])])
         listener(delivered);
     return true;
@@ -586,6 +594,19 @@ test('on iPhone (no element fullscreen) EXPAND opens the viewer as a popover ove
       assert.equal(dom.wrap.popoverOpen, true);
       assert.equal(dom.root.contains(dom.wrap), true, 'never leaves the panel');
       assert.deepEqual(expandLabel(dom), ['SHRINK', 'true']);
+      // Esc shrinks the photo; the panel's own Esc (collapse) never sees it.
+      let panelEsc = 0;
+      dom.root.addEventListener('keydown', () => panelEsc++);
+      expand.dispatchEvent({ type: 'keydown', key: 'Escape', bubbles: true });
+      await settle();
+      await settle();
+      assert.equal(dom.wrap.popoverOpen, false);
+      assert.equal(panelEsc, 0, 'the panel stays open');
+      assert.deepEqual(expandLabel(dom), ['EXPAND', 'false']);
+      expand.click();
+      await settle();
+      await settle();
+      assert.equal(dom.wrap.popoverOpen, true, 'and opens again');
       expand.click();
       await settle();
       await settle();