From 2c84d804592163e7a4f053f54e5d29d8102b74c9 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Wed, 17 Jun 2026 13:57:31 +0300
Subject: [PATCH 1/5] docs: document sibling repos and cross-repo branch
 workflow

Add a Sibling Repositories section to README.md and CLAUDE.md covering
subturtle-dashboard-app (server/dashboard) and pilotui, plus guidance for
agents to search/clone a sibling locally and work on a feature branch in
the sibling when a change is needed to verify this repo's branch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 CLAUDE.md | 42 +++++++++++++++++++++++++++++++++++++++++-
 README.md | 14 ++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index b3c0199..63b8284 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -17,6 +17,46 @@ yarn typecheck    # tsc --noEmit via the upstream-error filter
 
 Load `dist/` as an unpacked extension at `chrome://extensions`. There is no separate dev server — the bundler writes straight to `dist/`, and Chrome reloads when you click the reload button on the extension card.
 
+## Sibling repositories
+
+This extension does not stand alone — it depends on two other `codebridger` repos. They are normally checked out **next to** this repo (`../`), and devs work on all of them side-by-side from the `subturtle-all-apps.code-workspace`.
+
+| Sibling | Repo | Consumed here as | Local checkout |
+| --- | --- | --- | --- |
+| Server / Dashboard | [`codebridger/subturtle-dashboard-app`](https://github.com/codebridger/subturtle-dashboard-app) | TS types imported by [src/stores/profile.ts](src/stores/profile.ts) via `../../../dashboard-app/frontend/types/database.type`; also the live dev API/auth server at `https://dev.dashboard.subturtle.app/`. | `../dashboard-app` — the import path resolves to a dir of that exact name next to this repo's root. CI clones it there (see [release.yml](.github/workflows/release.yml)). |
+| pilotUI | [`codebridger/pilotui`](https://github.com/codebridger/pilotui) | npm dependency `pilotui@^1.29.0` — the Tailwind/Vue component library the whole UI builds on. | `node_modules/pilotui` (a published, built artifact — **not** the source repo). Clone the repo separately to edit the source. |
+
+### Working across siblings (download / search / branch)
+
+When a change on this repo's branch needs a matching change in a sibling — a new field on a `dashboard-app` type, a fix in a `pilotui` component — you can pull the sibling in and work on it. **Do this on a feature branch in the sibling; never commit to the sibling's `main` just to make this repo's branch pass.** The goal is to verify this repo's branch against the modified sibling while keeping the sibling's `main` clean.
+
+1. **Search locally first.** The sibling is often already on disk next to this repo. Confirm before cloning:
+   ```bash
+   git -C ../dashboard-app remote -v      # expect codebridger/subturtle-dashboard-app
+   ls node_modules/pilotui                # the built pilotui (read-only artifact)
+   ```
+   `dashboard-app` may also be checked out under its full name `../subturtle-dashboard-app`; the import path needs a dir literally named `dashboard-app`, so symlink or clone into that name.
+2. **Download it if missing.**
+   ```bash
+   git clone https://github.com/codebridger/subturtle-dashboard-app.git ../dashboard-app
+   git clone https://github.com/codebridger/pilotui.git ../pilotui
+   ```
+3. **Branch the sibling, then change it.**
+   ```bash
+   git -C ../dashboard-app checkout -b <feature-branch>   # e.g. feat/new-bundle-field
+   # …edit types/components in the sibling…
+   ```
+   This keeps the sibling's `main` untouched while this repo's branch is tested against the patched code.
+4. **Point this repo at the local pilotui to test a patch** (the dashboard types are already read straight off `../dashboard-app`):
+   ```bash
+   (cd ../pilotui && yarn link) && yarn link pilotui    # use local pilotui source
+   # …verify…
+   yarn unlink pilotui && yarn install --force          # revert before committing
+   ```
+   Never leave a `yarn link` / `file:` override in `package.json` when you commit — CI installs `pilotui@^1.29.0` from the registry.
+
+Same confirm-before-acting rule as always: never push a sibling branch or open a PR against a sibling without explicit per-action user confirmation.
+
 ## Bundles (+ popup, background)
 
 | Bundle | Entry | Runs on | Purpose |
@@ -146,7 +186,7 @@ And the `SettingsObject` type in [src/common/types/messaging.ts](src/common/type
 - **Selection popup must `@mousedown.prevent.stop`.** Otherwise clicking the popup deselects the page text, the composable detects the empty selection, and the popup unmounts mid-click.
 - **The mount root in Nibble must not block the page.** Set `width: 0; height: 0; position: fixed; top: 0; left: 0`. Children use their own `position: fixed` to position themselves relative to the viewport.
 - **Theme dark class lives on `.subturtle-scope`, not `<html>`.** Tailwind's `dark:` rules are rewritten by `postcss-prefix-selector` to `.subturtle-scope.dark ...` — so the same element must carry both classes. The settings store handles this and a `MutationObserver` keeps Vue Teleport subtrees in sync.
-- **`src/stores/profile.ts` imports types from a sibling repo.** The path `../../../dashboard-app/frontend/types/database.type` resolves to a directory _next to_ this repo's root, not inside it. The actual repo is [`codebridger/subturtle-dashboard-app`](https://github.com/codebridger/subturtle-dashboard-app); local builds work because devs check both repos out side-by-side. CI clones the dashboard repo into `../dashboard-app/` before `yarn build` runs (see [.github/workflows/release.yml](.github/workflows/release.yml)). Don't try to "fix" the import to a relative-internal path or vendor the file — both will drift.
+- **`src/stores/profile.ts` imports types from a sibling repo.** The path `../../../dashboard-app/frontend/types/database.type` resolves to a directory _next to_ this repo's root, not inside it. The actual repo is [`codebridger/subturtle-dashboard-app`](https://github.com/codebridger/subturtle-dashboard-app); local builds work because devs check both repos out side-by-side. CI clones the dashboard repo into `../dashboard-app/` before `yarn build` runs (see [.github/workflows/release.yml](.github/workflows/release.yml)). Don't try to "fix" the import to a relative-internal path or vendor the file — both will drift. See [§ Sibling repositories](#sibling-repositories) for how to pull in / branch the dashboard and pilotui repos.
 - **Playwright Chromium download isn't on CCW's Trusted allowlist.** The chrome-extension-tester-mcp's `postinstall` runs `playwright install chromium`, which pulls from `cdn.playwright.dev` / `playwright.download.prss.microsoft.com`. CCW environments must use Custom network access with those hosts added — see [§ Cloud agent workflow](#cloud-agent-workflow-claude-code-on-the-web). The setup script caches Chromium into the VM snapshot so per-session cost is zero.
 
 ## Adding things
diff --git a/README.md b/README.md
index a384b8f..97e5c58 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,7 @@ Latest updates
 ## Table of Contents
 
 - [Project Overview](#project-overview)
+- [Sibling Repositories](#sibling-repositories)
 - [Architecture](#architecture)
   - [Main Modules](#main-modules)
   - [Data Flow](#data-flow)
@@ -75,6 +76,19 @@ Subturtle is a Chrome extension designed to help users learn English while watch
 
 ---
 
+## Sibling Repositories
+
+This extension is one of three side-by-side `codebridger` repositories. The other two are normally checked out **next to** this repo (`../`) and developed together via the `subturtle-all-apps.code-workspace`.
+
+| Sibling | Repository | Role | How it's used here |
+| --- | --- | --- | --- |
+| Server / Dashboard | [`codebridger/subturtle-dashboard-app`](https://github.com/codebridger/subturtle-dashboard-app) | Backend API, auth, and user dashboard (dev server at `https://dev.dashboard.subturtle.app/`). | The extension imports shared TypeScript types from it (`src/stores/profile.ts`) and talks to its API at runtime. Cloned to `../dashboard-app` locally and in CI. |
+| pilotUI | [`codebridger/pilotui`](https://github.com/codebridger/pilotui) | Shared Tailwind/Vue component library. | Installed as the npm dependency `pilotui` and used across the popup, ConsoleCrane, and subtitle UIs. |
+
+**For contributors and AI agents:** a change in this repo sometimes needs a matching change in a sibling. You can **search for the sibling locally first** (it's usually already cloned next to this repo) and **download/clone it if it's missing**. When you need to modify a sibling to test this repo's branch, do it on a **feature branch in the sibling** rather than committing to its `main`. The full search/clone/branch/link workflow is documented in [CLAUDE.md § Sibling repositories](./CLAUDE.md#sibling-repositories).
+
+---
+
 ## Architecture
 
 ### Main Modules

From f9f1c8e465f81ae14a8bdf40f42d7642f702be4c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 17 Jun 2026 11:40:58 +0000
Subject: [PATCH 2/5] fix(console-crane): close bundle selector dropdown and
 contain its list #86exzbh61
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The save-phrase bundle selector (a pilotui Select in custom+multiple mode)
would not close and its option list spilled out of the modal.

- Close: pilotui's only outside-driven close is a document handler that bails
  whenever the click sits under any `.relative` ancestor — true for nearly
  every click inside the ConsoleCrane modal, so the dropdown never closed.
  pilotui exposes no close method or `open` prop, so drive its own Escape
  handler from a self-managed outside-pointerdown listener and a real
  closeDropdown() (the latter also wired up the previously no-op after-save
  close called by SaveWordSectionV2).
- Overflow: pilotui only gives the option list an internal scroll in `confirm`
  mode; in the `custom` mode used here the list grows past the panel's
  max-height and out of the modal. Make the panel a flex column and let the
  list region scroll within it.

Adds a happy-dom regression test for the close mechanism.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JsGMdHrjQfWRausa9T14kw
---
 .../components/SelectPhraseBundleV2.vue       |  77 +++++++++++-
 tests/select-phrase-bundle.test.ts            | 119 ++++++++++++++++++
 2 files changed, 191 insertions(+), 5 deletions(-)
 create mode 100644 tests/select-phrase-bundle.test.ts

diff --git a/src/console-crane/components/SelectPhraseBundleV2.vue b/src/console-crane/components/SelectPhraseBundleV2.vue
index 198564d..727fe62 100644
--- a/src/console-crane/components/SelectPhraseBundleV2.vue
+++ b/src/console-crane/components/SelectPhraseBundleV2.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="relative w-full">
+  <div ref="rootRef" class="relative w-full">
     <Select v-model="selected" :options="options" multiple custom labelKey="title" valueKey="_id"
-      :placeholder="showSuggestion ? '' : 'Select Phrase Bundles to save...'">
+      :placeholder="showSuggestion ? '' : 'Select Phrase Bundles to save...'" @open="isDropdownOpen = true"
+      @close="isDropdownOpen = false">
       <template #selected="{
         selectedOption,
         selectedOptions,
@@ -108,6 +109,11 @@ const isCreating = ref(false);
 const searchedBundleName = ref("");
 const options = ref<PhraseBundleType[]>([]);
 
+// Component root — boundary for our own outside-click close (see below).
+const rootRef = ref<HTMLElement | null>(null);
+// Mirrors pilotui Select's internal open state via its open/close events.
+const isDropdownOpen = ref(false);
+
 // In-field suggested bundle (shown only when nothing is selected yet).
 const isEditingSuggested = ref(false);
 const editBuffer = ref("");
@@ -273,19 +279,58 @@ watch(searchedBundleName, () => {
   }, 300); // 300ms debounce
 });
 
+/**
+ * Close the pilotui Select dropdown.
+ *
+ * pilotui's Select owns its open state internally and exposes no close method or
+ * `open` prop — the only outside-driven close it offers is its own document
+ * click handler, which bails whenever the click lands inside ANY `.relative`
+ * ancestor (Select.vue `handleClickOutside`). Inside the ConsoleCrane modal —
+ * where almost everything sits under a Tailwind `relative` wrapper — that guard
+ * matches on nearly every click, so the dropdown effectively never closes.
+ *
+ * We drive pilotui's own close path instead by dispatching the Escape key its
+ * trigger button already handles (`handleKeydown` → `closeDropdown`). It's
+ * idempotent: closing an already-closed dropdown is a no-op, so this can't
+ * accidentally re-open. Used both for our outside-click handler and by
+ * SaveWordSectionV2 after a successful save.
+ */
+function closeDropdown() {
+  const trigger = rootRef.value?.querySelector<HTMLButtonElement>(
+    'button[aria-haspopup="true"]'
+  );
+  trigger?.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+  );
+}
+
+/**
+ * Close the dropdown when the user clicks anywhere outside this component.
+ * Replaces pilotui's `.relative`-based outside detection, which misfires inside
+ * the modal (see closeDropdown). We only act while open and only for clicks that
+ * land outside our root, so in-dropdown interactions (multi-select toggles,
+ * search, create, chip removal, suggestion edit) are untouched.
+ */
+function handleOutsidePointer(event: Event) {
+  if (!isDropdownOpen.value) return;
+  const root = rootRef.value;
+  if (root && !root.contains(event.target as Node)) {
+    closeDropdown();
+  }
+}
+
 onMounted(() => {
   fetchOptions();
+  document.addEventListener("pointerdown", handleOutsidePointer);
 });
 
 onBeforeUnmount(() => {
   if (searchDebounceTimer) {
     clearTimeout(searchDebounceTimer);
   }
+  document.removeEventListener("pointerdown", handleOutsidePointer);
 });
 
-// Expose method for compatibility (Select manages its own open state)
-function closeDropdown() { }
-
 defineExpose({
   closeDropdown,
 });
@@ -324,4 +369,26 @@ defineExpose({
 .relative.w-full :deep(.flex.flex-col > .relative > .relative > button) {
   flex: 1 1 auto;
 }
+
+/*
+  Keep the open dropdown panel inside its own max-height instead of spilling the
+  bundle list out of the modal (ClickUp 86exzbh61). pilotui only gives the
+  option list an internal scroll in `confirm` mode; in the `custom` mode we use
+  here the list container is a plain `flex-1` with no overflow, so a long list
+  grows past the panel's max-height and out of the modal. Make the panel a flex
+  column and let the list region scroll within it.
+
+  Targets pilotui's internal markup (the absolutely-positioned listbox panel and
+  its `flex-1` body); a pilotui nesting change would make this a cosmetic
+  regression, not a functional break.
+*/
+.relative.w-full :deep([role="listbox"]) {
+  display: flex;
+  flex-direction: column;
+}
+
+.relative.w-full :deep([role="listbox"] > .flex-1) {
+  min-height: 0;
+  overflow-y: auto;
+}
 </style>
diff --git a/tests/select-phrase-bundle.test.ts b/tests/select-phrase-bundle.test.ts
new file mode 100644
index 0000000..1b1b5fb
--- /dev/null
+++ b/tests/select-phrase-bundle.test.ts
@@ -0,0 +1,119 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createPinia } from "pinia";
+import { nextTick } from "vue";
+import { Select } from "pilotui";
+
+/**
+ * Regression net for ClickUp 86exzbh61: the bundle selector dropdown in the save
+ * modal wouldn't close. pilotui's Select only closes from outside via its own
+ * `.relative`-based document handler, which misfires inside the ConsoleCrane
+ * modal (almost everything sits under a Tailwind `relative` wrapper) and exposes
+ * no close method/prop. SelectPhraseBundleV2 now runs its own outside-click
+ * close and a working `closeDropdown()` (also used by SaveWordSectionV2 after a
+ * save), both of which drive pilotui's own close path by dispatching the Escape
+ * key its trigger button handles.
+ *
+ * These tests assert that mechanism: the Escape keydown reaches the Select's
+ * trigger on an outside click / on closeDropdown(), and is NOT fired for clicks
+ * inside the dropdown (so multi-select toggles keep it open). They deliberately
+ * don't rely on pilotui actually rendering its open panel in happy-dom — that
+ * round trip is covered by the real-browser flow; here we pin our own logic.
+ */
+
+const { BUNDLES } = vi.hoisted(() => ({
+  BUNDLES: Array.from({ length: 14 }, (_, i) => ({
+    _id: `b${i}`,
+    title: `Bundle ${i}`,
+  })),
+}));
+
+vi.mock("@modular-rest/client", () => ({
+  dataProvider: {
+    find: vi.fn().mockResolvedValue(BUNDLES),
+    insertOne: vi.fn().mockResolvedValue({ _id: "new" }),
+  },
+  authentication: { user: { id: "u1" } },
+}));
+
+import SelectPhraseBundleV2 from "../src/console-crane/components/SelectPhraseBundleV2.vue";
+
+async function mountSelector() {
+  const wrapper = mount(SelectPhraseBundleV2, {
+    attachTo: document.body,
+    props: { selectedBundles: [] as string[] },
+    global: { plugins: [createPinia()] },
+  });
+  await flushPromises(); // fetchOptions() resolves
+
+  const triggerEl = wrapper
+    .find('button[aria-haspopup="true"]')
+    .element as HTMLButtonElement;
+
+  // Spy on the Escape keydown our close path dispatches at the trigger — this is
+  // what reaches pilotui's own closeDropdown handler.
+  const escapes: string[] = [];
+  triggerEl.addEventListener("keydown", (e) => {
+    escapes.push((e as KeyboardEvent).key);
+  });
+
+  // Mirror pilotui opening its dropdown (we listen to its `open` event).
+  const openDropdown = () => wrapper.findComponent(Select).vm.$emit("open");
+
+  return { wrapper, triggerEl, escapes, openDropdown };
+}
+
+describe("SelectPhraseBundleV2 dropdown close behaviour", () => {
+  let outside: HTMLElement;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    outside = document.createElement("div");
+    document.body.appendChild(outside);
+  });
+
+  it("closes on an outside click while open", async () => {
+    const { wrapper, escapes, openDropdown } = await mountSelector();
+    openDropdown();
+    await nextTick();
+
+    outside.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    await nextTick();
+
+    expect(escapes).toContain("Escape");
+    wrapper.unmount();
+  });
+
+  it("does nothing on an outside click while already closed", async () => {
+    const { wrapper, escapes } = await mountSelector();
+    // No openDropdown() — isDropdownOpen stays false.
+    outside.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    await nextTick();
+
+    expect(escapes).toHaveLength(0);
+    wrapper.unmount();
+  });
+
+  it("stays open when interacting inside the dropdown (multi-select)", async () => {
+    const { wrapper, triggerEl, escapes, openDropdown } = await mountSelector();
+    openDropdown();
+    await nextTick();
+
+    // A pointer press inside our root (e.g. toggling an option) must not be
+    // treated as an outside click.
+    triggerEl.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    await nextTick();
+
+    expect(escapes).toHaveLength(0);
+    wrapper.unmount();
+  });
+
+  it("exposes a working closeDropdown() for the post-save path", async () => {
+    const { wrapper, escapes } = await mountSelector();
+    (wrapper.vm as unknown as { closeDropdown: () => void }).closeDropdown();
+    await nextTick();
+
+    expect(escapes).toContain("Escape");
+    wrapper.unmount();
+  });
+});

From ca49b143cbefa8d6d3097066c0295ce8819a2795 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 17 Jun 2026 14:13:11 +0000
Subject: [PATCH 3/5] fix(console-crane): keep bundle list within the modal
 frame #86exzbh61
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bundle list was capped at pilotui's max-h-96 with an internal scroll, but
the save section sits near the modal bottom, so the fixed downward panel still
ran past the visible frame — the user had to scroll the modal AND the list.

On open, measure the trigger against the nearest scroll frame and place the
absolutely-positioned panel accordingly: flip it upward when it can't fully open
downward and there's more room above, and cap its height to the available space
(minus a gap) in whichever direction it opens. Reposition on resize/scroll while
open; pilotui exposes no placement API, so this is done via inline styles on its
rendered panel. The list scrolls internally within the cap.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JsGMdHrjQfWRausa9T14kw
---
 .../components/SelectPhraseBundleV2.vue       | 79 ++++++++++++++++++-
 1 file changed, 77 insertions(+), 2 deletions(-)

diff --git a/src/console-crane/components/SelectPhraseBundleV2.vue b/src/console-crane/components/SelectPhraseBundleV2.vue
index 727fe62..5c2a21f 100644
--- a/src/console-crane/components/SelectPhraseBundleV2.vue
+++ b/src/console-crane/components/SelectPhraseBundleV2.vue
@@ -1,8 +1,8 @@
 <template>
   <div ref="rootRef" class="relative w-full">
     <Select v-model="selected" :options="options" multiple custom labelKey="title" valueKey="_id"
-      :placeholder="showSuggestion ? '' : 'Select Phrase Bundles to save...'" @open="isDropdownOpen = true"
-      @close="isDropdownOpen = false">
+      :placeholder="showSuggestion ? '' : 'Select Phrase Bundles to save...'" @open="onDropdownOpen"
+      @close="onDropdownClose">
       <template #selected="{
         selectedOption,
         selectedOptions,
@@ -319,6 +319,80 @@ function handleOutsidePointer(event: Event) {
   }
 }
 
+/**
+ * Size and place the open dropdown so it never runs past the modal frame
+ * (ClickUp 86exzbh61 follow-up). The save section sits near the bottom of the
+ * ConsoleCrane modal, so pilotui's fixed downward max-h-96 panel spilled below
+ * the visible frame — forcing a modal scroll on top of the list's own scroll.
+ *
+ * pilotui has no placement API, so on open we measure the trigger against the
+ * nearest scroll frame and set inline styles on its absolutely-positioned panel:
+ * flip it upward when it can't fully open downward and there's more room above,
+ * and cap its height to the available space (minus a gap) in whichever direction
+ * it opens. The list scrolls internally within that cap (see scoped styles).
+ */
+function positionDropdown() {
+  const root = rootRef.value;
+  if (!root) return;
+  const panel = root.querySelector<HTMLElement>('[role="listbox"]');
+  const trigger = root.querySelector<HTMLElement>('button[aria-haspopup="true"]');
+  if (!panel || !trigger) return;
+
+  const GAP = 12; // breathing room between the panel and the frame edge
+  const MAX = 336; // pilotui's max-h-96 (24rem → 336px after the rem→px rewrite)
+
+  const frameEl =
+    root.closest<HTMLElement>(".overflow-y-auto") ?? document.documentElement;
+  const frame = frameEl.getBoundingClientRect();
+  const t = trigger.getBoundingClientRect();
+
+  const below = frame.bottom - t.bottom - GAP;
+  const above = t.top - frame.top - GAP;
+
+  // Flip up only when the list can't fully open downward and there's more room
+  // above; otherwise keep the natural downward placement.
+  const openUp = below < MAX && above > below;
+  const avail = Math.max(0, openUp ? above : below);
+
+  panel.style.maxHeight = `${Math.min(MAX, avail)}px`;
+  if (openUp) {
+    panel.style.top = "auto";
+    panel.style.bottom = "calc(100% + 4px)";
+    panel.style.marginTop = "0";
+  } else {
+    // Clear any prior upward placement (panel is reused across reposition runs).
+    panel.style.top = "";
+    panel.style.bottom = "";
+    panel.style.marginTop = "";
+  }
+}
+
+// Reposition the open dropdown when the viewport or modal body changes size /
+// scrolls; torn down again on close so the listeners only live while open.
+let removeReposition: (() => void) | null = null;
+
+function onDropdownOpen() {
+  isDropdownOpen.value = true;
+  nextTick(positionDropdown);
+
+  if (removeReposition) return;
+  const handler = () => positionDropdown();
+  const frameEl: Window | HTMLElement =
+    rootRef.value?.closest<HTMLElement>(".overflow-y-auto") ?? window;
+  window.addEventListener("resize", handler);
+  frameEl.addEventListener("scroll", handler, { passive: true });
+  removeReposition = () => {
+    window.removeEventListener("resize", handler);
+    frameEl.removeEventListener("scroll", handler);
+  };
+}
+
+function onDropdownClose() {
+  isDropdownOpen.value = false;
+  removeReposition?.();
+  removeReposition = null;
+}
+
 onMounted(() => {
   fetchOptions();
   document.addEventListener("pointerdown", handleOutsidePointer);
@@ -329,6 +403,7 @@ onBeforeUnmount(() => {
     clearTimeout(searchDebounceTimer);
   }
   document.removeEventListener("pointerdown", handleOutsidePointer);
+  removeReposition?.();
 });
 
 defineExpose({

From 5f7544b939f6960a3235f168cdf8f11175f9997a Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 17 Jun 2026 14:29:31 +0000
Subject: [PATCH 4/5] chore(release): 1.15.0-dev.2 [skip ci]

# [1.15.0-dev.2](https://github.com/codebridger/subturtle-extension-apps/compare/v1.15.0-dev.1...v1.15.0-dev.2) (2026-06-17)

### Bug Fixes

* **console-crane:** close bundle selector dropdown and contain its list [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([f9f1c8e](https://github.com/codebridger/subturtle-extension-apps/commit/f9f1c8e465f81ae14a8bdf40f42d7642f702be4c)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
* **console-crane:** keep bundle list within the modal frame [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([ca49b14](https://github.com/codebridger/subturtle-extension-apps/commit/ca49b143cbefa8d6d3097066c0295ce8819a2795)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
---
 CHANGELOG-DEV.md     | 8 ++++++++
 package.json         | 2 +-
 static/manifest.json | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG-DEV.md b/CHANGELOG-DEV.md
index 285c0a8..e57bdde 100644
--- a/CHANGELOG-DEV.md
+++ b/CHANGELOG-DEV.md
@@ -1,3 +1,11 @@
+# [1.15.0-dev.2](https://github.com/codebridger/subturtle-extension-apps/compare/v1.15.0-dev.1...v1.15.0-dev.2) (2026-06-17)
+
+
+### Bug Fixes
+
+* **console-crane:** close bundle selector dropdown and contain its list [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([f9f1c8e](https://github.com/codebridger/subturtle-extension-apps/commit/f9f1c8e465f81ae14a8bdf40f42d7642f702be4c)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
+* **console-crane:** keep bundle list within the modal frame [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([ca49b14](https://github.com/codebridger/subturtle-extension-apps/commit/ca49b143cbefa8d6d3097066c0295ce8819a2795)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
+
 # [1.15.0-dev.1](https://github.com/codebridger/subturtle-extension-apps/compare/v1.14.1...v1.15.0-dev.1) (2026-06-09)
 
 
diff --git a/package.json b/package.json
index e5955f2..505de15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "subturtle-extension",
-  "version": "1.15.0-dev.1",
+  "version": "1.15.0-dev.2",
   "private": true,
   "scripts": {
     "dev": "webpack --watch",
diff --git a/static/manifest.json b/static/manifest.json
index 58eb4c5..109ca46 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "Subturtle: Learn English with Subtitles, Videos & AI Coach",
 	"description": "Learn English from any video or web page: tap a subtitle word for its meaning, save and review words, and speak with an AI coach.",
-	"version": "1.15.0.1",
+	"version": "1.15.0.2",
 	"manifest_version": 3,
 	"icons": {
 		"128": "/assets/logo-128.png",
@@ -80,5 +80,5 @@
 			]
 		}
 	],
-	"version_name": "1.15.0-dev.1"
+	"version_name": "1.15.0-dev.2"
 }

From 8c7b552f8aa5db671cbdc271e8fc146f304e54a7 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 17 Jun 2026 14:43:44 +0000
Subject: [PATCH 5/5] chore(release): 1.15.1-dev.1 [skip ci]

## [1.15.1-dev.1](https://github.com/codebridger/subturtle-extension-apps/compare/v1.15.0...v1.15.1-dev.1) (2026-06-17)

### Bug Fixes

* **console-crane:** close bundle selector dropdown and contain its list [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([f9f1c8e](https://github.com/codebridger/subturtle-extension-apps/commit/f9f1c8e465f81ae14a8bdf40f42d7642f702be4c)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
* **console-crane:** keep bundle list within the modal frame [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([ca49b14](https://github.com/codebridger/subturtle-extension-apps/commit/ca49b143cbefa8d6d3097066c0295ce8819a2795)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
---
 CHANGELOG-DEV.md     | 8 ++++++++
 package.json         | 4 ++--
 static/manifest.json | 6 +++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG-DEV.md b/CHANGELOG-DEV.md
index e57bdde..18e7dc2 100644
--- a/CHANGELOG-DEV.md
+++ b/CHANGELOG-DEV.md
@@ -1,3 +1,11 @@
+## [1.15.1-dev.1](https://github.com/codebridger/subturtle-extension-apps/compare/v1.15.0...v1.15.1-dev.1) (2026-06-17)
+
+
+### Bug Fixes
+
+* **console-crane:** close bundle selector dropdown and contain its list [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([f9f1c8e](https://github.com/codebridger/subturtle-extension-apps/commit/f9f1c8e465f81ae14a8bdf40f42d7642f702be4c)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
+* **console-crane:** keep bundle list within the modal frame [#86](https://github.com/codebridger/subturtle-extension-apps/issues/86)exzbh61 ([ca49b14](https://github.com/codebridger/subturtle-extension-apps/commit/ca49b143cbefa8d6d3097066c0295ce8819a2795)), closes [#86exzbh61](https://github.com/codebridger/subturtle-extension-apps/issues/86exzbh61)
+
 # [1.15.0-dev.2](https://github.com/codebridger/subturtle-extension-apps/compare/v1.15.0-dev.1...v1.15.0-dev.2) (2026-06-17)
 
 
diff --git a/package.json b/package.json
index 8bc1575..4125322 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "subturtle-extension",
-  "version": "1.15.0-dev.2",
+  "version": "1.15.1-dev.1",
   "private": true,
   "scripts": {
     "dev": "webpack --watch",
@@ -60,4 +60,4 @@
     "vue": "3.5.17",
     "vue-router": "4.5.1"
   }
-}
\ No newline at end of file
+}
diff --git a/static/manifest.json b/static/manifest.json
index ee30407..a8d32bd 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "Subturtle: Learn English with Subtitles, Videos & AI Coach",
 	"description": "Learn English from any video or web page: tap a subtitle word for its meaning, save and review words, and speak with an AI coach.",
-	"version": "1.15.0.2",
+	"version": "1.15.1.1",
 	"manifest_version": 3,
 	"icons": {
 		"128": "/assets/logo-128.png",
@@ -80,5 +80,5 @@
 			]
 		}
 	],
-	"version_name": "1.15.0-dev.2"
-}
\ No newline at end of file
+	"version_name": "1.15.1-dev.1"
+}