Fix env-select popup placement on narrow windows and dismissal on blur (#1037)

* Keep the env-select popup on screen and dismiss it on window blur

On a narrow window the 600px popup was positioned by subtracting its width
and padding from the title bar width, which goes negative once the window
approaches its 400px minimum. The popup then rendered clipped off the left
edge with its search box unreachable, so clamp the left coordinate to zero.

The popup also lingered when the window lost OS focus, since the blur
handler only deactivated the title bar. Because the popup is a child view
of the same window, focusing it does not blur the window, so a blur only
fires on a real focus loss such as Alt-Tab, which is exactly when the popup
should close. Hide it from that handler.

I built and verified this with Claude Code, checking the clamp against a
unit test that reproduces the off-screen coordinate on a 400px window.

* fix: cap the env popup width to the window so nothing is clipped

Clamping only the x moved the clipping from the left edge to the right, so on a
narrow window the search box became reachable but the config button and the
environment names were cut off. The popup is a fixed 600px while the window
minWidth is 400, so it can never fit at that size by position alone.

Cap the popup width to the space between the left edge and its right anchor
instead. The popup content is responsive, so it reflows to fit and the whole
thing stays on screen. Verified on a built app at a 470px window: the popup
renders fully inside the window (x 0, width 437), with the search box, the
config button and the full environment list all visible. Caught the earlier
clamp-only version by looking at a before/after screenshot with Claude Code.

Author: notluquis

src/main/sessionwindow/sessionwindow.ts

@@ -182,6 +182,7 @@ export class SessionWindow implements IDisposable {
     });
     this._window.on('blur', () => {
       titleBarView.deactivate();
+      this._hideEnvSelectPopup();
     });
 
     titleBarView.load();
@@ -1356,18 +1357,23 @@ export class SessionWindow implements IDisposable {
     }
 
     const titleBarRect = this._titleBarView.view.getBounds();
-    const popupWidth = 600;
     const paddingRight = process.platform === 'darwin' ? 33 : 127;
+    // Anchor the popup's right edge near the env button and cap its width to
+    // what fits, so on a narrow window it shrinks (the popup content is
+    // responsive) instead of hanging off an edge with the search box or the
+    // env list clipped.
+    const rightEdge = titleBarRect.width - paddingRight;
+    const popupWidth = Math.min(600, rightEdge);
     // shorten browser view height if larger than max allowed
     const maxHeight = Math.min(
       this._envSelectPopup.getScrollHeight(),
       defaultEnvSelectPopupHeight
     );
 
     this._envSelectPopup.view.view.setBounds({
-      x: Math.round(titleBarRect.width - paddingRight - popupWidth),
+      x: Math.round(rightEdge - popupWidth),
       y: Math.round(titleBarRect.height),
-      width: popupWidth,
+      width: Math.round(popupWidth),
       height: Math.round(maxHeight)
     });
   }

test/unit/sessionwindow-dispose.test.ts

@@ -23,3 +23,32 @@ describe('SessionWindow._disposeSession', () => {
     await expect(win._disposeSession()).resolves.toBeUndefined();
   });
 });
+
+describe('SessionWindow._resizeEnvSelectPopup', () => {
+  it('keeps the popup on screen when the window is narrower than the popup', () => {
+    // Arrange: a 400px title bar (the window minWidth) is narrower than the
+    // 600px popup, so an unclamped x would place the popup off the left edge.
+    const setBounds = vi.fn();
+    const win = makeWindow({
+      _envSelectPopupVisible: true,
+      _titleBarView: {
+        view: { getBounds: () => ({ width: 400, height: 60 }) }
+      },
+      _envSelectPopup: {
+        getScrollHeight: () => 300,
+        view: { view: { setBounds } }
+      }
+    });
+
+    // Act
+    win._resizeEnvSelectPopup();
+
+    // Assert: the whole popup fits inside the window, so neither the search box
+    // on the left nor the env list on the right is clipped. Clamping x alone
+    // would only move the clipping to the other edge, so the width is capped too.
+    expect(setBounds).toHaveBeenCalledTimes(1);
+    const bounds = setBounds.mock.calls[0][0];
+    expect(bounds.x).toBeGreaterThanOrEqual(0);
+    expect(bounds.x + bounds.width).toBeLessThanOrEqual(400);
+  });
+});