From 5e78b64e350e07ee14d54d22312cd71fbfc7f32b Mon Sep 17 00:00:00 2001
From: Younsang Na <77400131+nayounsang@users.noreply.github.com>
Date: Wed, 9 Sep 2026 15:20:51 +0900
Subject: [PATCH] fix(stage-tamagotchi): prevent controls island overflow in
 small windows with scroll (#2474)

## Description

<!-- Please insert your description here and especially provide info
about the "what" this PR is solving -->

### As-is
Depending on the size, the Controls Island area gets cut off, making the
buttons in the cropped area inaccessible.

### To-be
The Controls Island is managed via scrolling, allowing interaction with
buttons regardless of the size.
If the main controls also exceed the available space, the entire
Controls Island becomes scrollable. Horizontal scrolling is available
for narrow windows.

#### narrow & smaill

https://github.com/user-attachments/assets/1a44ff4f-8fe2-4a05-96a8-59ebf7dafcff

#### somewhat generous size


https://github.com/user-attachments/assets/c73dbee4-8c8f-4937-ae1a-eda00178274c



## Linked Issues



<!-- Optional, if you have any -->
close #2400

## Additional Context

<!-- e.g. is there anything you'd like reviewers to focus on? -->
Although the size is somewhat less than ideal, the issue has been
resolved, and this serves as a universal solution.

---------

Co-authored-by: leafyy <wuqizq@outlook.com>
---
 .../control-button-tooltip.vue                |  39 +-
 .../controls-island-auth-button.test.ts       |  49 +-
 .../controls-island-auth-button.vue           |  21 +-
 .../controls-island-overflow.browser.test.ts  | 523 +++++++++++++++++
 .../controls-island-profile-picker.vue        |   5 +
 .../controls-island-stop-speaking.test.ts     |   1 +
 .../stage-islands/controls-island/index.vue   | 533 ++++++++++--------
 .../use-controls-island-layout.ts             |  89 +++
 .../src/renderer/pages/index.vue              |  10 +-
 .../misc/profile-switcher-popover.vue         | 173 ++++--
 10 files changed, 1123 insertions(+), 320 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-overflow.browser.test.ts
 create mode 100644 apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/use-controls-island-layout.ts

diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue
index 3ffd402ef..248afdec9 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TooltipContentProps } from 'reka-ui'
 
-import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
+import { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
 import { computed } from 'vue'
 
 import { useControlsIslandPlacement } from './use-controls-island-placement'
@@ -31,26 +31,33 @@ const resolvedSide = computed<NonNullable<TooltipContentProps['side']>>(() => {
       <TooltipTrigger>
         <slot />
       </TooltipTrigger>
-      <Transition name="fade">
-        <TooltipContent
-          :class="[
-            'border-1 border-solid border-neutral-200/60 dark:border-neutral-800/10',
-            'bg-neutral-50/80 dark:bg-neutral-800/70',
-            'w-fit flex items-center self-end justify-center px-1.5 py-1',
-            'rounded-lg backdrop-blur-md',
-            'max-w-[min(18rem,calc(100vw-1rem))] break-words text-center text-xs leading-4 whitespace-normal',
-          ]"
-          :side="resolvedSide"
-          :side-offset="4"
-        >
-          <slot name="tooltip" />
-        </TooltipContent>
-      </Transition>
+      <TooltipPortal>
+        <Transition name="fade">
+          <TooltipContent
+            :class="[
+              'controls-island-tooltip',
+              'border-1 border-solid border-neutral-200/60 dark:border-neutral-800/10',
+              'bg-neutral-50/80 dark:bg-neutral-800/70',
+              'w-fit flex items-center self-end justify-center px-1.5 py-1',
+              'rounded-lg backdrop-blur-md',
+              'max-w-[min(18rem,calc(100vw-1rem))] break-words text-center text-xs leading-4 whitespace-normal',
+            ]"
+            :side="resolvedSide"
+            :side-offset="4"
+          >
+            <slot name="tooltip" />
+          </TooltipContent>
+        </Transition>
+      </TooltipPortal>
     </TooltipRoot>
   </TooltipProvider>
 </template>
 
 <style scoped>
+:global([data-reka-popper-content-wrapper=""]:has(.controls-island-tooltip)) {
+  z-index: 1000 !important;
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.2s ease-in-out;
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.test.ts b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.test.ts
index 0d3edd917..f8a64626d 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.test.ts
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.test.ts
@@ -5,6 +5,11 @@ import { createApp, h, nextTick, ref } from 'vue'
 
 import ControlsIslandAuthButton from './controls-island-auth-button.vue'
 
+import { electronAuthStartLogin } from '../../../../shared/eventa'
+
+const subscriptions = vi.hoisted(() => ({ on: vi.fn(() => vi.fn()) }))
+const invokes = vi.hoisted(() => ({ startLogin: vi.fn(), openSettings: vi.fn() }))
+
 const authState = {
   isAuthenticated: ref(true),
   user: ref<{ name: string, image?: string }>({
@@ -21,13 +26,9 @@ vi.mock('@proj-airi/stage-ui/stores/auth', () => ({
 
 vi.mock('@proj-airi/electron-vueuse', () => ({
   useElectronEventaContext: () => ref({
-    on: vi.fn(),
+    on: subscriptions.on,
   }),
-  useElectronEventaInvoke: () => vi.fn(),
-}))
-
-vi.mock('pinia', () => ({
-  storeToRefs: (store: object) => store,
+  useElectronEventaInvoke: (event: unknown) => event === electronAuthStartLogin ? invokes.startLogin : invokes.openSettings,
 }))
 
 vi.mock('vue-i18n', () => ({
@@ -45,20 +46,52 @@ describe('controlsIslandAuthButton', () => {
       host.remove()
     }
     mountedApps.length = 0
+    authState.isAuthenticated.value = true
+    authState.needsLogin.value = false
+    invokes.startLogin.mockReset()
+    invokes.openSettings.mockReset()
     authState.user.value.image = 'https://example.com/broken-avatar.png'
   })
 
-  function mountComponent() {
+  function mountComponent(active = ref(true)) {
     const host = document.createElement('div')
     document.body.appendChild(host)
     const app = createApp({
-      render: () => h(ControlsIslandAuthButton),
+      render: () => h(ControlsIslandAuthButton, { active: active.value }),
     })
     app.mount(host)
     mountedApps.push({ app, host })
     return host
   }
 
+  it('starts a deferred login when the hidden menu becomes active', async () => {
+    authState.isAuthenticated.value = false
+    const active = ref(false)
+    mountComponent(active)
+
+    authState.needsLogin.value = true
+    await nextTick()
+    expect(invokes.startLogin).not.toHaveBeenCalled()
+    expect(authState.needsLogin.value).toBe(true)
+
+    active.value = true
+    await nextTick()
+    expect(invokes.startLogin).toHaveBeenCalledOnce()
+    expect(authState.needsLogin.value).toBe(false)
+  })
+
+  it('disposes both auth subscriptions when the menu unmounts', () => {
+    subscriptions.on.mockClear()
+    mountComponent()
+    expect(subscriptions.on).toHaveBeenCalledTimes(2)
+    const stops = subscriptions.on.mock.results.map(result => result.value)
+    mountedApps[0]!.app.unmount()
+    for (const stop of stops)
+      expect(stop).toHaveBeenCalledOnce()
+    mountedApps[0]!.host.remove()
+    mountedApps.length = 0
+  })
+
   it('renders the shared account fallback when no avatar is available', () => {
     authState.user.value.image = undefined
     const host = mountComponent()
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.vue b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.vue
index d64b1fc97..b047b6dcb 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-auth-button.vue
@@ -3,7 +3,7 @@ import { useElectronEventaContext, useElectronEventaInvoke } from '@proj-airi/el
 import { useAuthStore } from '@proj-airi/stage-ui/stores/auth'
 import { Avatar } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, onScopeDispose, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {
@@ -14,6 +14,7 @@ import {
 } from '../../../../shared/eventa'
 
 const props = defineProps<{
+  active: boolean
   buttonStyle?: string
   iconClass?: string
 }>()
@@ -45,18 +46,22 @@ function doSigningIn() {
   startSigningIn()
 }
 
-// Clear loading state on callback or error from main process.
-// No cleanup needed — this component lives for the window's lifetime.
-context.value.on(electronAuthCallback, () => {
+// Each listener belongs to this mounted menu, including its hidden measurement state.
+const stopCallback = context.value.on(electronAuthCallback, () => {
   signingIn.value = false
 })
-context.value.on(electronAuthCallbackError, () => {
+const stopError = context.value.on(electronAuthCallbackError, () => {
   signingIn.value = false
 })
+onScopeDispose(() => {
+  stopCallback()
+  stopError()
+})
 
-// React to needsLogin from other components (e.g. onboarding)
-watch(needsLogin, (val) => {
-  if (val && !isAuthenticated.value) {
+// Hidden measurement must not initiate login requests. Keep the request until
+// the menu becomes visible, then preserve the original transition behavior.
+watch([needsLogin, () => props.active], ([requested, active]) => {
+  if (active && requested && !isAuthenticated.value) {
     doSigningIn()
     needsLogin.value = false
   }
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-overflow.browser.test.ts b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-overflow.browser.test.ts
new file mode 100644
index 000000000..0fa3dd8db
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-overflow.browser.test.ts
@@ -0,0 +1,523 @@
+import type { AiriCard } from '@proj-airi/stage-ui/stores/modules/airi-card'
+
+import type { ControlsIslandDock } from './use-controls-island-placement'
+
+import en from '@proj-airi/i18n/locales/en'
+
+import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
+import { useArtistryStore } from '@proj-airi/stage-ui/stores/modules/artistry'
+import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
+import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
+import { useVisionStore } from '@proj-airi/stage-ui/stores/modules/vision/store'
+import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { useSettingsStageModel } from '@proj-airi/stage-ui/stores/settings/stage-model'
+import { createPinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-vue'
+import { page } from 'vitest/browser'
+import { computed, defineComponent, h, nextTick, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import ControlsIsland from './index.vue'
+
+import { electronOpenSettings } from '../../../../shared/eventa'
+import { controlsIslandPlacementKey } from './use-controls-island-placement'
+
+import '@unocss/reset/tailwind.css'
+import 'virtual:uno.css'
+
+const isOutside = ref(false)
+const openSettings = vi.fn().mockResolvedValue(undefined)
+const authState = vi.hoisted(() => ({
+  credits: { value: 0 },
+  isAuthenticated: { value: false },
+  needsLogin: { value: false },
+  user: { value: null as { createdAt: Date, email: string, emailVerified: boolean, id: string, name: string, updatedAt: Date } | null },
+}))
+
+vi.mock('@proj-airi/electron-vueuse', () => ({
+  useElectronEventaContext: () => ref({ on: vi.fn(() => vi.fn()), emit: vi.fn() }),
+  useElectronEventaInvoke: (event: unknown) => event === electronOpenSettings ? openSettings : vi.fn().mockResolvedValue(false),
+  useElectronMouseInElement: () => ({ isOutside }),
+}))
+
+vi.mock('@moeru/eventa', async importOriginal => ({
+  ...await importOriginal<typeof import('@moeru/eventa')>(),
+  defineInvoke: () => vi.fn(),
+}))
+
+vi.mock('@proj-airi/stage-ui/stores/auth', async () => {
+  const { ref } = await import('vue')
+  authState.credits = ref(0)
+  authState.isAuthenticated = ref(false)
+  authState.needsLogin = ref(false)
+  authState.user = ref(null)
+
+  return { useAuthStore: () => authState }
+})
+
+function scrollOwners(island: HTMLElement) {
+  return Array.from(island.querySelectorAll<HTMLElement>('[data-reka-scroll-area-viewport]'))
+    .filter(element => getComputedStyle(element).overflowY === 'scroll' && element.scrollHeight > element.clientHeight)
+}
+
+const docks: ControlsIslandDock[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+const sizes = ['small', 'large', 'auto'] as const
+
+function mountControlsIsland(dock: ControlsIslandDock, size: typeof sizes[number] = 'auto', dockRef = ref(dock), initializeProfile = false) {
+  const pinia = createPinia()
+  const i18n = createI18n({ legacy: false, locale: 'en', messages: { en } })
+  const component = initializeProfile
+    ? defineComponent({
+        setup() {
+          // Seed the profile store without invoking the stage's asynchronous
+          // runtime initialization. The profile form only needs an active card.
+          const cards = useAiriCardStore()
+          // Create the stores that card duplication reads while Vue still has
+          // a component setup context. The action itself can then reuse them.
+          useArtistryStore()
+          useConsciousnessStore()
+          useSpeechStore()
+          useSettingsStageModel()
+          useVisionStore()
+          const defaultCard = {
+            name: 'ReLU',
+            version: '1.0.0',
+            extensions: {
+              airi: {
+                modules: {
+                  consciousness: { provider: '', model: '' },
+                  vision: { provider: '', model: '' },
+                  speech: { provider: '', model: '', voice_id: '' },
+                },
+                agents: {},
+              },
+            },
+          } satisfies AiriCard
+          cards.cards.set('default', defaultCard)
+          return () => h(ControlsIsland)
+        },
+      })
+    : ControlsIsland
+  const screen = render(component, {
+    global: {
+      provide: {
+        [controlsIslandPlacementKey as symbol]: {
+          dock: dockRef,
+          isTop: computed(() => dockRef.value.startsWith('top')),
+          isLeft: computed(() => dockRef.value.endsWith('left')),
+          motionPhase: ref('idle'),
+        },
+      },
+      plugins: [pinia, i18n],
+      directives: { 'track-button': {} },
+    },
+  })
+  useSettings(pinia).controlsIslandIconSize = size
+
+  return { cards: useAiriCardStore(pinia), auth: authState, dock: dockRef, i18n, screen, settings: useSettings(pinia) }
+}
+
+beforeEach(() => {
+  isOutside.value = false
+  openSettings.mockClear()
+  authState.credits.value = 0
+  authState.isAuthenticated.value = false
+  authState.needsLogin.value = false
+  authState.user.value = null
+})
+
+describe('controls Island overflow', () => {
+  for (const dock of docks) {
+    for (const size of sizes) {
+      // ROOT CAUSE:
+      // The expanded panel had no viewport limit or scroll owner. Its first rows
+      // left the window when the panel and main controls exceeded its height.
+      // The menu now owns scrolling until the main controls fill the viewport.
+      // https://github.com/moeru-ai/airi/issues/2400
+      it(`Issue #2400 keeps ${dock} ${size} controls reachable across measured boundaries`, async () => {
+        await page.viewport(450, 600)
+        const { i18n, screen } = mountControlsIsland(dock, size)
+        await nextTick()
+        const island = screen.getByTestId('controls-island').element() as HTMLElement
+        const main = screen.getByTestId('main-controls').element() as HTMLElement
+        const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+        await expect.poll(() => Number.parseFloat(getComputedStyle(main.querySelector('div.size-3, div.size-5')!).width)).toBe(size === 'small' ? 12 : 20)
+        const mainHeight = main.getBoundingClientRect().height
+        const mainBefore = main.getBoundingClientRect()
+        await screen.getByLabelText(label('expand'), { exact: true }).click()
+        const menu = screen.getByTestId('controls-menu').element() as HTMLElement
+        await expect.poll(() => island.getBoundingClientRect().height).toBeGreaterThan(mainHeight)
+        expect(main.getBoundingClientRect().top).toBe(mainBefore.top)
+        expect(main.getBoundingClientRect().right).toBe(mainBefore.right)
+        await expect.poll(() => scrollOwners(island)).toHaveLength(0)
+        const naturalHeight = island.getBoundingClientRect().height
+        const naturalWidth = island.getBoundingClientRect().width
+        const menuHeight = menu.querySelector<HTMLElement>('.w-max')!.offsetHeight
+        const isTop = dock.startsWith('top')
+        const isLeft = dock.endsWith('left')
+
+        for (const height of [naturalHeight + 17, naturalHeight + 16, naturalHeight + 15, mainHeight + 17, mainHeight + 16, mainHeight + 15, 600]) {
+          await page.viewport(450, Math.ceil(height))
+          const sideways = height < naturalHeight + 16
+          await expect.poll(() => island.dataset.direction).toBe(sideways ? (isLeft ? 'right' : 'left') : (isTop ? 'down' : 'up'))
+          await expect.poll(() => island.getBoundingClientRect().height).toBeLessThanOrEqual(Math.ceil(height) - 16)
+          expect(island.getBoundingClientRect().top).toBeGreaterThanOrEqual(8)
+          expect(island.getBoundingClientRect().bottom).toBeLessThanOrEqual(Math.ceil(height) - 8)
+          expect(main.getBoundingClientRect().height).toBe(mainHeight)
+          const expectedOwnerCount = Math.max(mainHeight, menuHeight) > Math.ceil(height) - 16 ? 1 : 0
+          await expect.poll(() => scrollOwners(island).length).toBe(expectedOwnerCount)
+          if (expectedOwnerCount) {
+            const owner = scrollOwners(island)[0]!
+            expect(menu.contains(owner)).toBe(height >= mainHeight + 16)
+            owner.scrollTop = owner.scrollHeight
+            expect(owner.scrollTop).toBeGreaterThan(0)
+          }
+        }
+
+        for (const width of [naturalWidth + 17, naturalWidth + 16, naturalWidth + 15, 40, 450]) {
+          await page.viewport(Math.ceil(width), 600)
+          await expect.poll(() => island.getBoundingClientRect().width).toBeLessThanOrEqual(Math.ceil(width) - 16)
+          expect(island.getBoundingClientRect().left).toBeGreaterThanOrEqual(8)
+          if (width < naturalWidth + 16) {
+            const owner = Array.from(island.querySelectorAll<HTMLElement>('[data-reka-scroll-area-viewport]'))
+              .find(viewport => viewport.scrollWidth > viewport.clientWidth)!
+            owner.scrollLeft = owner.scrollWidth
+            expect(owner.scrollLeft).toBeGreaterThan(0)
+          }
+        }
+
+        await page.viewport(450, Math.ceil(mainHeight + 60))
+        const settings = screen.getByLabelText(label('open-settings'), { exact: true })
+        const settingsElement = settings.element() as HTMLElement
+        settingsElement.focus()
+        await expect.poll(() => settingsElement.getBoundingClientRect().top).toBeGreaterThanOrEqual(8)
+        await settings.click()
+        expect(openSettings).toHaveBeenCalledWith({ route: '/settings' })
+
+        await screen.getByLabelText(label('collapse'), { exact: true }).click()
+        await expect.poll(() => menu.closest('[aria-hidden]')?.getAttribute('aria-hidden')).toBe('true')
+        await screen.getByLabelText(label('expand'), { exact: true }).click()
+        const reopenedViewport = screen.getByTestId('controls-menu').element().querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+        expect(reopenedViewport.scrollTop).toBe(0)
+      })
+    }
+  }
+
+  for (const dock of ['top-right', 'bottom-right'] as const) {
+    it(`Issue #2400 aligns ${dock} controls to the visible right edge`, async () => {
+      await page.viewport(450, 600)
+      const { i18n, screen } = mountControlsIsland(dock)
+      const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+
+      await screen.getByLabelText(label('expand'), { exact: true }).click()
+      const island = screen.getByTestId('controls-island').element() as HTMLElement
+      const naturalWidth = island.getBoundingClientRect().width
+      await page.viewport(Math.max(40, Math.floor(naturalWidth / 2)), 600)
+
+      const viewport = island.querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+      await expect.poll(() => screen.getByTestId('main-controls').element().getBoundingClientRect().right).toBeLessThanOrEqual(window.innerWidth - 8)
+      expect(viewport.scrollLeft).toBe(0)
+    })
+  }
+
+  // ROOT CAUSE:
+  // Icon size changes alter the Island geometry after a right-docked layout has
+  // been aligned. The old implementation did not realign after that change.
+  //
+  // Before the patch, the right dock kept a stale horizontal scroll position.
+  //
+  // We fixed this by observing the Island geometry and aligning after updates.
+  it('issue #2400 realigns the right dock after an icon size change', async () => {
+    await page.viewport(450, 600)
+    const { i18n, screen, settings } = mountControlsIsland('bottom-right', 'small')
+    const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+
+    await screen.getByLabelText(label('expand'), { exact: true }).click()
+    const island = screen.getByTestId('controls-island').element() as HTMLElement
+    const viewport = island.querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+    await page.viewport(40, 600)
+    await expect.poll(() => viewport.scrollLeft).toBeGreaterThan(0)
+    const previousScrollWidth = viewport.scrollWidth
+
+    settings.controlsIslandIconSize = 'large'
+    await expect.poll(() => viewport.scrollWidth).toBeGreaterThan(previousScrollWidth)
+    await expect.poll(() => viewport.scrollLeft).toBe(viewport.scrollWidth - viewport.clientWidth)
+  })
+
+  // ROOT CAUSE:
+  // Tooltip content is portaled outside the Island and can render below the
+  // stage when it uses the default stacking order.
+  //
+  // Before the patch, a tooltip over a control could be hidden by the stage.
+  //
+  // We fixed this by keeping the control tooltip portal above the stage layer.
+  it('issue #2400 raises portaled control tooltips above the stage', async () => {
+    await page.viewport(450, 600)
+    const { i18n, screen } = mountControlsIsland('bottom-right')
+    const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+
+    await screen.getByLabelText(label('expand'), { exact: true }).click()
+    await screen.getByLabelText(label('open-settings'), { exact: true }).hover()
+
+    const tooltipWrapper = '[data-reka-popper-content-wrapper]'
+    await expect.poll(() => document.querySelector(tooltipWrapper)).not.toBeNull()
+    expect(getComputedStyle(document.querySelector(tooltipWrapper)!).zIndex).toBe('1000')
+  })
+
+  // ROOT CAUSE:
+  // Authentication content can grow after the right-docked Island has been
+  // aligned, which changes the horizontal overflow range.
+  //
+  // Before the patch, the right edge moved out of view after the user signed in.
+  //
+  // We fixed this by observing content geometry and realigning the dock edge.
+  it('issue #2400 realigns the right dock after authentication content grows', async () => {
+    await page.viewport(450, 600)
+    const { auth, i18n, screen } = mountControlsIsland('bottom-right')
+    const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+
+    await screen.getByLabelText(label('expand'), { exact: true }).click()
+    const island = screen.getByTestId('controls-island').element() as HTMLElement
+    const viewport = island.querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+    await page.viewport(40, 600)
+    await expect.poll(() => viewport.scrollLeft).toBeGreaterThan(0)
+    const previousScrollWidth = viewport.scrollWidth
+
+    auth.credits.value = 999999999
+    auth.isAuthenticated.value = true
+    auth.user.value = {
+      createdAt: new Date('2020-01-01'),
+      email: 'user@example.com',
+      emailVerified: true,
+      id: 'user',
+      name: 'A very long authenticated user name that changes the island width',
+      updatedAt: new Date('2020-01-01'),
+    }
+
+    await expect.poll(() => viewport.scrollWidth).toBeGreaterThan(previousScrollWidth)
+    await expect.poll(() => viewport.scrollLeft).toBe(viewport.scrollWidth - viewport.clientWidth)
+  })
+
+  // ROOT CAUSE:
+  // Dock changes reverse the horizontal edge that must remain visible, but the
+  // previous scroll offset belongs to the old dock.
+  //
+  // Before the patch, moving from right to left kept the old right-edge offset.
+  //
+  // We fixed this by aligning both axes whenever the dock changes.
+  it('issue #2400 resets horizontal scroll after moving from a right dock to a left dock', async () => {
+    await page.viewport(450, 600)
+    const { dock, i18n, screen } = mountControlsIsland('bottom-right')
+    const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+
+    await screen.getByLabelText(label('expand'), { exact: true }).click()
+    const island = screen.getByTestId('controls-island').element() as HTMLElement
+    const viewport = island.querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+    await page.viewport(40, 600)
+    await expect.poll(() => viewport.scrollLeft).toBeGreaterThan(0)
+
+    dock.value = 'bottom-left'
+    await expect.poll(() => viewport.scrollLeft).toBe(0)
+  })
+
+  // ROOT CAUSE:
+  // A bottom-docked Island must use the lower scroll edge when its content is
+  // taller than the window, or the main controls can remain below the viewport.
+  //
+  // Before the patch, the bottom dock could open with its main controls clipped.
+  //
+  // We fixed this by aligning the outer viewport to the dock edge after layout changes.
+  it('issue #2400 aligns bottom docks to the visible vertical scroll end', async () => {
+    await page.viewport(450, 200)
+    const { i18n, screen } = mountControlsIsland('bottom-right')
+    const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+
+    await screen.getByLabelText(label('expand'), { exact: true }).click()
+    const island = screen.getByTestId('controls-island').element() as HTMLElement
+    const viewport = island.querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+    await expect.poll(() => viewport.scrollHeight).toBeGreaterThan(viewport.clientHeight)
+    // Focused collapse remains reachable even when docking would clip it.
+    const collapse = screen.getByLabelText(label('collapse'), { exact: true }).element() as HTMLElement
+    expect(collapse.getBoundingClientRect().top).toBeGreaterThanOrEqual(8)
+    collapse.blur()
+    await page.viewport(450, 190)
+    await expect.poll(() => viewport.scrollTop).toBe(viewport.scrollHeight - viewport.clientHeight)
+  })
+
+  // ROOT CAUSE:
+  // A scrollbar drag can move the pointer outside the Island while the user is
+  // still interacting with it.
+  //
+  // Before the patch, the outside timer collapsed the menu during a scrollbar drag.
+  //
+  // We fixed this by treating pressed scrollbar interaction as a blocked state.
+  // The interaction path is independent from the size and dock matrix.
+  it('issue #2400 keeps the expanded menu open during a scrollbar drag', async () => {
+    await page.viewport(450, 300)
+    const { i18n, screen } = mountControlsIsland('bottom-right')
+    const label = (key: string) => i18n.global.t(`tamagotchi.stage.controls-island.${key}`)
+    await screen.getByLabelText(label('expand'), { exact: true }).click()
+
+    const island = screen.getByTestId('controls-island').element() as HTMLElement
+    const settings = screen.getByLabelText(label('open-settings'), { exact: true }).element() as HTMLElement
+    settings.focus()
+    expect(island.contains(document.activeElement)).toBe(true)
+    expect(settings.getBoundingClientRect().bottom).toBeGreaterThan(8)
+
+    island.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    isOutside.value = true
+    await new Promise(resolve => setTimeout(resolve, 1700))
+    expect(screen.getByTestId('controls-menu').element()).toBeInTheDocument()
+    window.dispatchEvent(new MouseEvent('mouseup'))
+    await expect.poll(() => screen.getByTestId('controls-menu').element().closest('[aria-hidden]')?.getAttribute('aria-hidden'), { timeout: 3500 }).toBe('true')
+  })
+})
+
+// https://github.com/moeru-ai/airi/pull/2474
+it('measures the collapsed menu and opens inward when height is insufficient (PR #2474)', async () => {
+  // ROOT CAUSE:
+  // The menu only mounted after opening and always used the vertical axis.
+  // Natural content measurement now determines both placement and the arrow.
+  await page.viewport(600, 300)
+  const { i18n, screen } = mountControlsIsland('bottom-right')
+  const island = screen.getByTestId('controls-island').element()
+  await expect.poll(() => island.getAttribute('data-direction')).toBe('left')
+  await screen.getByLabelText(i18n.global.t('tamagotchi.stage.controls-island.expand'), { exact: true }).click()
+  const main = screen.getByTestId('main-controls').element()
+  const menu = screen.getByTestId('controls-menu').element()
+  await expect.poll(() => menu.getBoundingClientRect().right).toBeLessThanOrEqual(main.getBoundingClientRect().left - 12)
+})
+
+// https://github.com/moeru-ai/airi/pull/2474
+it('keeps the profile creation form open for pointer interaction (PR #2474)', async () => {
+  // ROOT CAUSE:
+  // Closing the selector canceled creation, and the body portal counted as an
+  // outside click. The selector and form must share one interaction lifecycle.
+  await page.viewport(600, 300)
+  const { cards, i18n, screen } = mountControlsIsland('bottom-right', 'auto', ref('bottom-right'), true)
+  await screen.getByLabelText(i18n.global.t('tamagotchi.stage.controls-island.expand'), { exact: true }).click()
+  await screen.getByRole('combobox').click()
+  await page.getByRole('option', { name: i18n.global.t('stage.profile-switcher.save-as-new') }).click()
+  const input = page.getByPlaceholder(i18n.global.t('stage.profile-switcher.new-profile-name'))
+  await input.click()
+  await input.fill('New profile')
+  await expect.element(input).toHaveValue('New profile')
+  isOutside.value = true
+  await new Promise(resolve => setTimeout(resolve, 1700))
+  expect(screen.getByTestId('controls-menu').element().closest('[inert]')).toBeNull()
+  for (const [width, height] of [[160, 200], [100, 80], [600, 600]] as const) {
+    await page.viewport(width, height)
+    const form = page.getByTestId('profile-create-form').element() as HTMLElement
+    await expect.poll(() => form.getBoundingClientRect().right).toBeLessThanOrEqual(width - 8)
+    await expect.poll(() => form.getBoundingClientRect().bottom).toBeLessThanOrEqual(height - 8)
+    expect(form.getBoundingClientRect().left).toBeGreaterThanOrEqual(8)
+    expect(form.getBoundingClientRect().top).toBeGreaterThanOrEqual(8)
+  }
+  await page.getByRole('button', { name: i18n.global.t('stage.profile-switcher.save-as-new'), exact: true }).click()
+  await expect.poll(() => cards.activeCard?.name).toBe('New profile')
+  await expect.element(input).not.toBeInTheDocument()
+  isOutside.value = false
+
+  // ROOT CAUSE:
+  // Reopening the selector while creation was active changed the selected
+  // card but left the old form state alive. A later save could clone the new
+  // card with the name entered for the previous card.
+  //
+  // We fixed this by canceling creation when a non-create option is selected.
+  // The close-to-create transition remains allowed.
+  await screen.getByRole('combobox').click()
+  await page.getByRole('option', { name: i18n.global.t('stage.profile-switcher.save-as-new') }).click()
+  await page.getByPlaceholder(i18n.global.t('stage.profile-switcher.new-profile-name')).fill('Stale profile name')
+  await screen.getByRole('combobox').click()
+  await page.getByRole('option', { name: 'ReLU' }).click()
+  await expect.element(page.getByTestId('profile-create-form')).not.toBeInTheDocument()
+  await expect.poll(() => cards.activeCard?.name).toBe('ReLU')
+
+  await screen.getByRole('combobox').click()
+  await page.getByRole('option', { name: i18n.global.t('stage.profile-switcher.save-as-new') }).click()
+  const form = page.getByTestId('profile-create-form').element() as HTMLElement
+  form.querySelectorAll<HTMLButtonElement>('button')[1]!.click()
+  await expect.element(input).not.toBeInTheDocument()
+})
+
+for (const dock of docks) {
+  // https://github.com/moeru-ai/airi/pull/2474
+  it(`PR #2474 keeps one inert measured menu and rotates the ${dock} arrow before opening`, async () => {
+    await page.viewport(600, 600)
+    const { i18n, screen, settings } = mountControlsIsland(dock, 'small')
+    const island = screen.getByTestId('controls-island').element() as HTMLElement
+    const main = screen.getByTestId('main-controls').element() as HTMLElement
+    const menu = screen.getByTestId('controls-menu').element() as HTMLElement
+    const toggle = main.querySelector<HTMLButtonElement>('[aria-controls]')!
+    const icon = toggle.querySelector<HTMLElement>('[i-solar\\:alt-arrow-up-line-duotone]')!
+    const isTop = dock.startsWith('top')
+    const isLeft = dock.endsWith('left')
+    await expect.poll(() => island.offsetHeight === main.offsetHeight).toBe(true)
+    expect(toggle.getAttribute('aria-controls')).toBe(menu.id)
+    expect(menu.closest('[inert]')).not.toBeNull()
+    const hiddenButton = menu.querySelector<HTMLButtonElement>('button')!
+    hiddenButton.focus()
+    expect(document.activeElement).not.toBe(hiddenButton)
+    await expect.poll(() => icon.style.transform).toBe(`rotate(${isTop ? 180 : 0}deg)`)
+    await page.viewport(600, 120)
+    await expect.poll(() => island.dataset.direction).toBe(isLeft ? 'right' : 'left')
+    expect(icon.style.transform).toBe(`rotate(${isLeft ? 90 : 270}deg)`)
+    settings.controlsIslandIconSize = 'large'
+    await expect.poll(() => main.querySelector('.size-5')).not.toBeNull()
+    await page.viewport(600, 300)
+    await screen.getByLabelText(i18n.global.t('tamagotchi.stage.controls-island.expand'), { exact: true }).click()
+    expect(screen.getByTestId('controls-menu').element()).toBe(menu)
+    expect(menu.closest('[inert]')).toBeNull()
+    expect(icon.style.transform).toBe(`rotate(${isLeft ? 270 : 90}deg)`)
+    await page.viewport(600, 600)
+    await expect.poll(() => island.dataset.direction).toBe(isTop ? 'down' : 'up')
+    expect(screen.getByTestId('controls-menu').element()).toBe(menu)
+    const settingsButton = screen.getByLabelText(i18n.global.t('tamagotchi.stage.controls-island.open-settings'), { exact: true }).element() as HTMLElement
+    settingsButton.focus()
+    isOutside.value = true
+    await expect.poll(() => toggle.getAttribute('aria-expanded'), { timeout: 3500 }).toBe('false')
+    expect(document.activeElement).toBe(toggle)
+    await expect.poll(() => island.offsetHeight === main.offsetHeight).toBe(true)
+    expect(menu.closest('[inert]')).not.toBeNull()
+  })
+}
+
+// https://github.com/moeru-ai/airi/pull/2474
+it('assigns sideways overflow to the necessary menu axes without nested scrolling (PR #2474)', async () => {
+  await page.viewport(600, 600)
+  const { i18n, screen } = mountControlsIsland('top-left', 'small')
+  await screen.getByLabelText(i18n.global.t('tamagotchi.stage.controls-island.expand'), { exact: true }).click()
+  const island = screen.getByTestId('controls-island').element() as HTMLElement
+  const main = screen.getByTestId('main-controls').element() as HTMLElement
+  const menu = screen.getByTestId('controls-menu').element() as HTMLElement
+  const content = menu.querySelector<HTMLElement>('.w-max')!
+  const viewport = menu.querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+  const outer = island.querySelector<HTMLElement>('[data-reka-scroll-area-viewport]')!
+  await expect.poll(() => scrollOwners(island)).toHaveLength(0)
+  // Extra auth-row spacing exercises content growth with native layout intact.
+  const login = menu.querySelector<HTMLButtonElement>('button')!
+  login.style.paddingBlock = '3rem'
+  await expect.poll(() => content.offsetHeight).toBeGreaterThan(main.offsetHeight + 20)
+  const menuHeight = content.offsetHeight
+  const narrowWidth = main.offsetWidth + 12 + content.offsetWidth - 20 + 16
+  for (const [width, height, horizontal, vertical] of [
+    [600, menuHeight + 16, false, false],
+    [narrowWidth, menuHeight + 16, true, false],
+    [600, menuHeight + 6, false, true],
+    [narrowWidth, menuHeight + 6, true, true],
+  ] as const) {
+    await page.viewport(width, height)
+    await expect.poll(() => island.dataset.direction).toBe('right')
+    await expect.poll(() => viewport.scrollWidth > viewport.clientWidth).toBe(horizontal)
+    await expect.poll(() => viewport.scrollHeight > viewport.clientHeight).toBe(vertical)
+    await expect.poll(() => outer.scrollWidth === outer.clientWidth).toBe(true)
+    await expect.poll(() => outer.scrollHeight === outer.clientHeight).toBe(true)
+    viewport.scrollTo(viewport.scrollWidth, viewport.scrollHeight)
+    await nextTick()
+    if (horizontal)
+      expect(viewport.scrollLeft).toBeGreaterThan(0)
+    if (vertical)
+      expect(viewport.scrollTop).toBeGreaterThan(0)
+  }
+})
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-profile-picker.vue b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-profile-picker.vue
index d312d47b0..94bdb0ea0 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-profile-picker.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-profile-picker.vue
@@ -8,6 +8,9 @@ import { useControlsIslandPlacement } from './use-controls-island-placement'
 
 defineOptions({ inheritAttrs: false })
 
+const props = defineProps<{ active: boolean }>()
+const emit = defineEmits<{ interactionChange: [active: boolean] }>()
+
 const open = defineModel<boolean>('open', { default: false })
 
 const openSettings = useElectronEventaInvoke(electronOpenSettings)
@@ -23,8 +26,10 @@ function handleManage() {
 <template>
   <ProfileSwitcherPopover
     v-model:open="open"
+    :active="props.active"
     :content-side="contentSide"
     :content-align="contentAlign"
+    @interaction-change="emit('interactionChange', $event)"
     @manage="handleManage"
   >
     <template #default="{ open: popoverOpen, toggle, activeCard }">
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-stop-speaking.test.ts b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-stop-speaking.test.ts
index d7a13945a..e5012ef5e 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-stop-speaking.test.ts
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/controls-island-stop-speaking.test.ts
@@ -43,6 +43,7 @@ vi.mock('pinia', () => ({
 
 vi.mock('reka-ui', () => ({
   TooltipContent: { template: '<div><slot /></div>', inheritAttrs: false },
+  TooltipPortal: { template: '<div><slot /></div>' },
   TooltipProvider: { template: '<div><slot /></div>' },
   TooltipRoot: { template: '<div><slot /></div>' },
   TooltipTrigger: { template: '<div><slot /></div>' },
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue
index 3be5dc44a..346b487f6 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue
@@ -3,10 +3,10 @@ import { defineInvoke } from '@moeru/eventa'
 import { useElectronEventaContext, useElectronEventaInvoke, useElectronMouseInElement } from '@proj-airi/electron-vueuse'
 import { IS_DEV } from '@proj-airi/stage-shared'
 import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { useTheme } from '@proj-airi/ui'
-import { refDebounced, useIntervalFn } from '@vueuse/core'
+import { ScrollableArea, useTheme } from '@proj-airi/ui'
+import { refDebounced, useIntervalFn, useMousePressed } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, reactive, ref, useTemplateRef, watch } from 'vue'
+import { computed, reactive, ref, useId, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import StatusIsland from '../status-island/index.vue'
@@ -28,6 +28,7 @@ import {
   electronStartDraggingWindow,
   electronWindowSetAlwaysOnTop,
 } from '../../../../shared/eventa'
+import { useControlsIslandLayout } from './use-controls-island-layout'
 import { useControlsIslandPlacement } from './use-controls-island-placement'
 
 interface Emits {
@@ -39,7 +40,8 @@ const emit = defineEmits<Emits>()
 
 const { isDark, toggleDark } = useTheme()
 const { t } = useI18n()
-const { dock, isLeft, isTop, motionPhase } = useControlsIslandPlacement()
+const placement = useControlsIslandPlacement()
+const { dock, isLeft, isTop, motionPhase } = placement
 
 const settingsAudioDeviceStore = useSettingsAudioDevice()
 const settingsStore = useSettings()
@@ -54,11 +56,36 @@ const setAlwaysOnTop = useElectronEventaInvoke(electronWindowSetAlwaysOnTop)
 const centerMainWindow = useElectronEventaInvoke(electronCenterMainWindow)
 
 const expanded = ref(false)
+// Closing disables interaction immediately. Keep layout until the exit
+// animation ends, then isolate the same menu for natural-size measurement.
+const panelPresent = ref(false)
 const islandElement = useTemplateRef<HTMLElement>('island')
+const islandScrollArea = useTemplateRef<InstanceType<typeof ScrollableArea>>('islandScrollArea')
+const islandViewport = computed(() => islandScrollArea.value?.viewport)
+const islandContent = useTemplateRef<HTMLElement>('islandContent')
+const mainControlsElement = useTemplateRef<HTMLElement>('mainControls')
+const menuContent = useTemplateRef<HTMLElement>('menuContent')
+const menuScrollArea = useTemplateRef<InstanceType<typeof ScrollableArea>>('menuScrollArea')
+const menuViewport = computed(() => menuScrollArea.value?.viewport)
+const availableSpaceElement = useTemplateRef<HTMLElement>('availableSpace')
+const gapElement = useTemplateRef<HTMLElement>('gap')
+const menuId = useId()
+const profileOpen = ref(false)
+const { direction, scrollWholeIsland, panelStyle, layoutClasses: islandLayoutClasses, arrowRotation, motionOffset } = useControlsIslandLayout({
+  main: mainControlsElement,
+  menu: menuContent,
+  available: availableSpaceElement,
+  gap: gapElement,
+  viewport: islandViewport,
+  menuViewport,
+  content: islandContent,
+}, expanded, placement)
 
 // Tracks open overlays/dialogs that should prevent auto-collapse (e.g. 'hearing', 'profile-picker')
 const blockingOverlays = reactive(new Set<string>())
-const isBlocked = computed(() => blockingOverlays.size > 0)
+// A scrollbar drag can leave the visible boundary before the user releases it.
+const { pressed } = useMousePressed({ target: islandElement })
+const isBlocked = computed(() => blockingOverlays.size > 0 || pressed.value)
 
 function setOverlay(key: string, active: boolean) {
   if (active) {
@@ -72,6 +99,7 @@ function setOverlay(key: string, active: boolean) {
 // The stage page observes this element for cursor hit testing.
 defineExpose({
   get element() { return islandElement.value },
+  get overlayActive() { return blockingOverlays.size > 0 || pressed.value },
   get hearingDialogOpen() { return blockingOverlays.has('hearing') },
   set hearingDialogOpen(v: boolean) { setOverlay('hearing', v) },
 })
@@ -86,7 +114,12 @@ watch(isOutsideAfter2seconds, (outside) => {
 })
 
 watch(expanded, (isExpanded) => {
+  if (isExpanded)
+    panelPresent.value = true
   if (!isExpanded) {
+    if (menuContent.value?.contains(document.activeElement) || blockingOverlays.size > 0)
+      mainControlsElement.value?.querySelector<HTMLButtonElement>('[aria-controls]')?.focus()
+    profileOpen.value = false
     blockingOverlays.clear()
   }
 })
@@ -159,25 +192,20 @@ const islandMotionClasses = computed(() => {
     isHidden && !isTop.value ? 'translate-y-2' : '',
   ]
 })
-const islandLayoutClasses = computed(() => [
-  isTop.value ? 'flex-col-reverse' : 'flex-col',
-  isLeft.value ? 'items-start' : 'items-end',
-])
 const mainControlsLayoutClasses = computed(() => [
   'flex gap-1',
   isTop.value ? 'flex-col-reverse' : 'flex-col',
 ])
 const panelPositionClasses = computed(() => {
   if (dock.value === 'top-left')
-    return ['mt-2', 'origin-top-left']
+    return ['origin-top-left']
   if (dock.value === 'top-right')
-    return ['mt-2', 'origin-top-right']
+    return ['origin-top-right']
   if (dock.value === 'bottom-left')
-    return ['mb-2', 'origin-bottom-left']
+    return ['origin-bottom-left']
 
-  return ['mb-2', 'origin-bottom-right']
+  return ['origin-bottom-right']
 })
-const panelHiddenTransformClass = computed(() => isTop.value ? '-translate-y-8' : 'translate-y-8')
 
 /**
  * This is a know issue (or expected behavior maybe) to Electron.
@@ -202,231 +230,290 @@ function resetMainWindowPosition() {
 <template>
   <div
     ref="island"
+    data-testid="controls-island"
+    :data-direction="direction"
+    :data-scroll-owner="scrollWholeIsland ? 'island' : 'menu'"
     :class="[
-      'fixed',
+      'fixed max-h-[calc(100dvh-1rem)] max-w-[calc(100dvw-1rem)]',
       islandPositionClasses,
       islandMotionClasses,
     ]"
   >
-    <div
-      :class="[
-        'flex gap-1',
-        islandLayoutClasses,
-      ]"
+    <!-- Probes track viewport/rem sizes without adding scrollable overflow. -->
+    <div aria-hidden="true" :class="['pointer-events-none invisible fixed size-0 overflow-hidden [contain:strict]']">
+      <div ref="availableSpace" :class="['h-[calc(100dvh-1rem)] w-[calc(100dvw-1rem)]']" />
+      <div ref="gap" :class="['size-3']" />
+    </div>
+    <ScrollableArea
+      ref="islandScrollArea"
+      orientation="both"
+      :class="['max-h-[inherit] max-w-[inherit]']"
+      viewport-class="overscroll-contain"
     >
-      <!-- iOS Style Drawer Panel -->
-      <Transition
-        enter-active-class="transition-all duration-500 cubic-bezier(0.32, 0.72, 0, 1)"
-        leave-active-class="transition-all duration-400 cubic-bezier(0.32, 0.72, 0, 1)"
-        :enter-from-class="`opacity-0 ${panelHiddenTransformClass} scale-90 blur-sm`"
-        :leave-to-class="`opacity-0 ${panelHiddenTransformClass} scale-90 blur-sm`"
-      >
+      <div ref="islandContent" :class="['relative w-max flex', panelPresent ? 'gap-3' : '', islandLayoutClasses]">
+        <!-- iOS Style Drawer Panel -->
         <div
-          v-if="expanded"
-          :class="[
-            'flex flex-col gap-1 rounded-2xl border border-neutral-200 p-2 dark:border-neutral-800',
-            'bg-neutral-100/80 shadow-2xl shadow-black/20 backdrop-blur-xl dark:bg-neutral-900/80',
-            panelPositionClasses,
-          ]"
+          :inert="!expanded"
+          :aria-hidden="!expanded"
+          :class="panelPresent ? 'contents' : 'pointer-events-none invisible absolute size-0 overflow-hidden [contain:strict]'"
         >
-          <ControlsIslandAuthButton
+          <ScrollableArea
+            :id="menuId"
+            ref="menuScrollArea"
+            data-testid="controls-menu"
+            orientation="both"
+            :style="panelStyle"
+            :class="['w-max shrink-0', panelPositionClasses]"
+            viewport-class="overscroll-contain"
+          >
+            <div
+              ref="menuContent"
+              :class="['w-max', expanded ? 'controls-menu-enter' : panelPresent ? 'controls-menu-leave' : 'opacity-0']"
+              :style="{ '--menu-offset': motionOffset }"
+              @animationend.self="panelPresent = expanded"
+            >
+              <div
+                :class="[
+                  'w-max flex flex-col gap-1 rounded-2xl border border-neutral-200 p-2 dark:border-neutral-800',
+                  'bg-neutral-100/80 shadow-2xl shadow-black/20 backdrop-blur-xl dark:bg-neutral-900/80',
+                ]"
+              >
+                <ControlsIslandAuthButton
+                  :active="expanded"
+                  :button-style="adjustStyleClasses.button"
+                  :icon-class="adjustStyleClasses.icon"
+                />
+
+                <div grid grid-cols-3 gap-2>
+                  <ControlButtonTooltip disable-hoverable-content>
+                    <ControlButton
+                      v-track-button="{ name: 'controls_island_action', action: 'toggle_settings' }"
+                      :button-style="adjustStyleClasses.button"
+                      :aria-label="t('tamagotchi.stage.controls-island.open-settings')"
+                      @click="openSettings({ route: '/settings' })"
+                    >
+                      <div i-solar:settings-minimalistic-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                    </ControlButton>
+                    <template #tooltip>
+                      {{ t('tamagotchi.stage.controls-island.open-settings') }}
+                    </template>
+                  </ControlButtonTooltip>
+
+                  <ControlButtonTooltip disable-hoverable-content>
+                    <ControlsIslandProfilePicker v-model:open="profileOpen" :active="expanded" @interaction-change="setOverlay('profile-picker', $event)">
+                      <template #default="{ toggle }">
+                        <ControlButton
+                          v-track-button="{ name: 'controls_island_action', action: 'toggle_profile_picker' }"
+                          :button-style="adjustStyleClasses.button"
+                          :aria-label="t('tamagotchi.stage.controls-island.switch-profile')"
+                          @click="toggle"
+                        >
+                          <div i-solar:emoji-funny-square-broken :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                        </ControlButton>
+                      </template>
+                    </ControlsIslandProfilePicker>
+                    <template #tooltip>
+                      {{ t('tamagotchi.stage.controls-island.switch-profile') }}
+                    </template>
+                  </ControlButtonTooltip>
+
+                  <ControlButtonTooltip disable-hoverable-content>
+                    <ControlButton
+                      v-track-button="{ name: 'controls_island_action', action: 'refresh_window' }"
+                      :button-style="adjustStyleClasses.button"
+                      :aria-label="t('tamagotchi.stage.controls-island.refresh')"
+                      @click="refreshWindow"
+                    >
+                      <div i-solar:refresh-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                    </ControlButton>
+                    <template #tooltip>
+                      {{ t('tamagotchi.stage.controls-island.refresh') }}
+                    </template>
+                  </ControlButtonTooltip>
+
+                  <ControlButtonTooltip disable-hoverable-content>
+                    <ControlButton
+                      v-track-button="{ name: 'controls_island_action', action: 'center_main_window' }"
+                      :button-style="adjustStyleClasses.button"
+                      :aria-label="t('tamagotchi.stage.controls-island.center-main-window')"
+                      @click="resetMainWindowPosition"
+                    >
+                      <div i-solar:target-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                    </ControlButton>
+                    <template #tooltip>
+                      {{ t('tamagotchi.stage.controls-island.center-main-window') }}
+                    </template>
+                  </ControlButtonTooltip>
+
+                  <ControlButtonTooltip disable-hoverable-content>
+                    <ControlButton
+                      v-track-button="{
+                        name: 'controls_island_action',
+                        action: isDark ? 'switch_to_light_mode' : 'switch_to_dark_mode',
+                      }"
+                      :button-style="adjustStyleClasses.button"
+                      :aria-label="isDark ? t('tamagotchi.stage.controls-island.switch-to-light-mode') : t('tamagotchi.stage.controls-island.switch-to-dark-mode')"
+                      @click="() => toggleDark()"
+                    >
+                      <Transition name="fade" mode="out-in">
+                        <div v-if="isDark" i-solar:moon-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                        <div v-else i-solar:sun-2-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                      </Transition>
+                    </ControlButton>
+                    <template #tooltip>
+                      {{ isDark ? t('tamagotchi.stage.controls-island.switch-to-light-mode') : t('tamagotchi.stage.controls-island.switch-to-dark-mode') }}
+                    </template>
+                  </ControlButtonTooltip>
+
+                  <ControlButtonTooltip disable-hoverable-content>
+                    <ControlButton
+                      v-track-button="{
+                        name: 'controls_island_action',
+                        action: alwaysOnTop ? 'unpin_from_top' : 'pin_on_top',
+                      }"
+                      :button-style="adjustStyleClasses.button"
+                      :aria-label="alwaysOnTop ? t('tamagotchi.stage.controls-island.unpin-from-top') : t('tamagotchi.stage.controls-island.pin-on-top')"
+                      @click="toggleAlwaysOnTop"
+                    >
+                      <div v-if="alwaysOnTop" i-solar:pin-bold :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                      <div v-else i-solar:pin-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300 opacity-50" />
+                    </ControlButton>
+                    <template #tooltip>
+                      {{ alwaysOnTop ? t('tamagotchi.stage.controls-island.unpin-from-top') : t('tamagotchi.stage.controls-island.pin-on-top') }}
+                    </template>
+                  </ControlButtonTooltip>
+
+                  <ControlsIslandFadeOnHover :icon-class="adjustStyleClasses.icon" :button-style="adjustStyleClasses.button" />
+
+                  <ControlButtonTooltip disable-hoverable-content>
+                    <ControlButton
+                      v-track-button="{ name: 'controls_island_action', action: 'close_app' }"
+                      :button-style="adjustStyleClasses.button"
+                      :aria-label="t('tamagotchi.stage.controls-island.close')"
+                      hover:bg-red-500
+                      hover:text-white
+                      @click="() => quitApp()"
+                    >
+                      <div i-solar:close-circle-outline :class="adjustStyleClasses.icon" />
+                    </ControlButton>
+                    <template #tooltip>
+                      {{ t('tamagotchi.stage.controls-island.close') }}
+                    </template>
+                  </ControlButtonTooltip>
+                </div>
+              </div>
+            </div>
+          </ScrollableArea>
+        </div>
+
+        <!-- Main Controls -->
+        <div ref="mainControls" data-testid="main-controls" :class="['shrink-0', mainControlsLayoutClasses]">
+          <ControlButtonTooltip side="inward">
+            <ControlButton
+              v-track-button="{
+                name: 'controls_island_action',
+                action: expanded ? 'collapse_controls' : 'expand_controls',
+              }"
+              :button-style="adjustStyleClasses.button"
+              :aria-expanded="expanded"
+              :aria-controls="menuId"
+              :aria-label="expanded ? t('tamagotchi.stage.controls-island.collapse') : t('tamagotchi.stage.controls-island.expand')"
+              @click="toggleControls"
+            >
+              <div
+                :class="adjustStyleClasses.icon"
+                :style="{ transform: `rotate(${arrowRotation}deg)` }"
+                i-solar:alt-arrow-up-line-duotone scale-110 transition-all duration-300
+                text="neutral-800 dark:neutral-300"
+              />
+            </ControlButton>
+            <template #tooltip>
+              {{ expanded ? t('tamagotchi.stage.controls-island.collapse') : t('tamagotchi.stage.controls-island.expand') }}
+            </template>
+          </ControlButtonTooltip>
+
+          <StatusIsland
+            v-if="IS_DEV"
             :button-style="adjustStyleClasses.button"
             :icon-class="adjustStyleClasses.icon"
           />
 
-          <div grid grid-cols-3 gap-2>
-            <ControlButtonTooltip disable-hoverable-content>
-              <ControlButton
-                v-track-button="{ name: 'controls_island_action', action: 'toggle_settings' }"
-                :button-style="adjustStyleClasses.button"
-                :aria-label="t('tamagotchi.stage.controls-island.open-settings')"
-                @click="openSettings({ route: '/settings' })"
-              >
-                <div i-solar:settings-minimalistic-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-              </ControlButton>
-              <template #tooltip>
-                {{ t('tamagotchi.stage.controls-island.open-settings') }}
-              </template>
-            </ControlButtonTooltip>
+          <ControlButtonTooltip side="inward">
+            <ControlButton
+              v-track-button="{ name: 'controls_island_action', action: 'toggle_chat' }"
+              :button-style="adjustStyleClasses.button"
+              :aria-label="t('tamagotchi.stage.controls-island.open-chat')"
+              @click="() => openChat()"
+            >
+              <div i-solar:chat-line-line-duotone :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+            </ControlButton>
+            <template #tooltip>
+              {{ t('tamagotchi.stage.controls-island.open-chat') }}
+            </template>
+          </ControlButtonTooltip>
 
-            <ControlButtonTooltip disable-hoverable-content>
-              <ControlsIslandProfilePicker :open="blockingOverlays.has('profile-picker')" @update:open="setOverlay('profile-picker', $event)">
-                <template #default="{ toggle }">
-                  <ControlButton
-                    v-track-button="{ name: 'controls_island_action', action: 'toggle_profile_picker' }"
-                    :button-style="adjustStyleClasses.button"
-                    :aria-label="t('tamagotchi.stage.controls-island.switch-profile')"
-                    @click="toggle"
-                  >
-                    <div i-solar:emoji-funny-square-broken :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-                  </ControlButton>
-                </template>
-              </ControlsIslandProfilePicker>
-              <template #tooltip>
-                {{ t('tamagotchi.stage.controls-island.switch-profile') }}
-              </template>
-            </ControlButtonTooltip>
+          <ControlButtonTooltip side="inward">
+            <ControlsIslandHearingConfig :show="blockingOverlays.has('hearing')" @update:show="setOverlay('hearing', $event)">
+              <div class="relative">
+                <ControlButton :button-style="adjustStyleClasses.button">
+                  <Transition name="fade" mode="out-in">
+                    <IndicatorMicVolume v-if="enabled" :class="adjustStyleClasses.icon" />
+                    <div v-else i-ph:microphone-slash :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+                  </Transition>
+                </ControlButton>
+              </div>
+            </ControlsIslandHearingConfig>
+            <template #tooltip>
+              {{ t('tamagotchi.stage.controls-island.open-hearing-controls') }}
+            </template>
+          </ControlButtonTooltip>
 
-            <ControlButtonTooltip disable-hoverable-content>
-              <ControlButton
-                v-track-button="{ name: 'controls_island_action', action: 'refresh_window' }"
-                :button-style="adjustStyleClasses.button"
-                :aria-label="t('tamagotchi.stage.controls-island.refresh')"
-                @click="refreshWindow"
-              >
-                <div i-solar:refresh-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-              </ControlButton>
-              <template #tooltip>
-                {{ t('tamagotchi.stage.controls-island.refresh') }}
-              </template>
-            </ControlButtonTooltip>
+          <ControlsIslandStopSpeaking
+            :button-style="adjustStyleClasses.button"
+            :icon-class="adjustStyleClasses.icon"
+          />
 
-            <ControlButtonTooltip disable-hoverable-content>
-              <ControlButton
-                v-track-button="{ name: 'controls_island_action', action: 'center_main_window' }"
-                :button-style="adjustStyleClasses.button"
-                :aria-label="t('tamagotchi.stage.controls-island.center-main-window')"
-                @click="resetMainWindowPosition"
-              >
-                <div i-solar:target-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-              </ControlButton>
-              <template #tooltip>
-                {{ t('tamagotchi.stage.controls-island.center-main-window') }}
-              </template>
-            </ControlButtonTooltip>
-
-            <ControlButtonTooltip disable-hoverable-content>
-              <ControlButton
-                v-track-button="{
-                  name: 'controls_island_action',
-                  action: isDark ? 'switch_to_light_mode' : 'switch_to_dark_mode',
-                }"
-                :button-style="adjustStyleClasses.button"
-                :aria-label="isDark ? t('tamagotchi.stage.controls-island.switch-to-light-mode') : t('tamagotchi.stage.controls-island.switch-to-dark-mode')"
-                @click="() => toggleDark()"
-              >
-                <Transition name="fade" mode="out-in">
-                  <div v-if="isDark" i-solar:moon-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-                  <div v-else i-solar:sun-2-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-                </Transition>
-              </ControlButton>
-              <template #tooltip>
-                {{ isDark ? t('tamagotchi.stage.controls-island.switch-to-light-mode') : t('tamagotchi.stage.controls-island.switch-to-dark-mode') }}
-              </template>
-            </ControlButtonTooltip>
-
-            <ControlButtonTooltip disable-hoverable-content>
-              <ControlButton
-                v-track-button="{
-                  name: 'controls_island_action',
-                  action: alwaysOnTop ? 'unpin_from_top' : 'pin_on_top',
-                }"
-                :button-style="adjustStyleClasses.button"
-                :aria-label="alwaysOnTop ? t('tamagotchi.stage.controls-island.unpin-from-top') : t('tamagotchi.stage.controls-island.pin-on-top')"
-                @click="toggleAlwaysOnTop"
-              >
-                <div v-if="alwaysOnTop" i-solar:pin-bold :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-                <div v-else i-solar:pin-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300 opacity-50" />
-              </ControlButton>
-              <template #tooltip>
-                {{ alwaysOnTop ? t('tamagotchi.stage.controls-island.unpin-from-top') : t('tamagotchi.stage.controls-island.pin-on-top') }}
-              </template>
-            </ControlButtonTooltip>
-
-            <ControlsIslandFadeOnHover :icon-class="adjustStyleClasses.icon" :button-style="adjustStyleClasses.button" />
-
-            <ControlButtonTooltip disable-hoverable-content>
-              <ControlButton
-                v-track-button="{ name: 'controls_island_action', action: 'close_app' }"
-                :button-style="adjustStyleClasses.button"
-                :aria-label="t('tamagotchi.stage.controls-island.close')"
-                hover:bg-red-500
-                hover:text-white
-                @click="() => quitApp()"
-              >
-                <div i-solar:close-circle-outline :class="adjustStyleClasses.icon" />
-              </ControlButton>
-              <template #tooltip>
-                {{ t('tamagotchi.stage.controls-island.close') }}
-              </template>
-            </ControlButtonTooltip>
-          </div>
+          <ControlButtonTooltip side="inward">
+            <ControlButton :button-style="adjustStyleClasses.button" cursor-move :class="{ 'drag-region': isLinux }" @mousedown="startDraggingWindow?.()">
+              <div i-ph:arrows-out-cardinal :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
+            </ControlButton>
+            <template #tooltip>
+              {{ t('tamagotchi.stage.controls-island.drag-to-move-window') }}
+            </template>
+          </ControlButtonTooltip>
         </div>
-      </Transition>
-
-      <!-- Main Controls -->
-      <div :class="mainControlsLayoutClasses">
-        <ControlButtonTooltip side="inward">
-          <ControlButton
-            v-track-button="{
-              name: 'controls_island_action',
-              action: expanded ? 'collapse_controls' : 'expand_controls',
-            }"
-            :button-style="adjustStyleClasses.button"
-            :aria-label="expanded ? t('tamagotchi.stage.controls-island.collapse') : t('tamagotchi.stage.controls-island.expand')"
-            @click="toggleControls"
-          >
-            <div
-              :class="[adjustStyleClasses.icon, isTop !== expanded ? 'rotate-180' : 'rotate-0']"
-              i-solar:alt-arrow-up-line-duotone scale-110 transition-all duration-300
-              text="neutral-800 dark:neutral-300"
-            />
-          </ControlButton>
-          <template #tooltip>
-            {{ expanded ? t('tamagotchi.stage.controls-island.collapse') : t('tamagotchi.stage.controls-island.expand') }}
-          </template>
-        </ControlButtonTooltip>
-
-        <StatusIsland
-          v-if="IS_DEV"
-          :button-style="adjustStyleClasses.button"
-          :icon-class="adjustStyleClasses.icon"
-        />
-
-        <ControlButtonTooltip side="inward">
-          <ControlButton
-            v-track-button="{ name: 'controls_island_action', action: 'toggle_chat' }"
-            :button-style="adjustStyleClasses.button"
-            :aria-label="t('tamagotchi.stage.controls-island.open-chat')"
-            @click="() => openChat()"
-          >
-            <div i-solar:chat-line-line-duotone :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-          </ControlButton>
-          <template #tooltip>
-            {{ t('tamagotchi.stage.controls-island.open-chat') }}
-          </template>
-        </ControlButtonTooltip>
-
-        <ControlButtonTooltip side="inward">
-          <ControlsIslandHearingConfig :show="blockingOverlays.has('hearing')" @update:show="setOverlay('hearing', $event)">
-            <div class="relative">
-              <ControlButton :button-style="adjustStyleClasses.button">
-                <Transition name="fade" mode="out-in">
-                  <IndicatorMicVolume v-if="enabled" :class="adjustStyleClasses.icon" />
-                  <div v-else i-ph:microphone-slash :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-                </Transition>
-              </ControlButton>
-            </div>
-          </ControlsIslandHearingConfig>
-          <template #tooltip>
-            {{ t('tamagotchi.stage.controls-island.open-hearing-controls') }}
-          </template>
-        </ControlButtonTooltip>
-
-        <ControlsIslandStopSpeaking
-          :button-style="adjustStyleClasses.button"
-          :icon-class="adjustStyleClasses.icon"
-        />
-
-        <ControlButtonTooltip side="inward">
-          <ControlButton :button-style="adjustStyleClasses.button" cursor-move :class="{ 'drag-region': isLinux }" @mousedown="startDraggingWindow?.()">
-            <div i-ph:arrows-out-cardinal :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
-          </ControlButton>
-          <template #tooltip>
-            {{ t('tamagotchi.stage.controls-island.drag-to-move-window') }}
-          </template>
-        </ControlButtonTooltip>
       </div>
-    </div>
+    </ScrollableArea>
   </div>
 </template>
+
+<style scoped>
+.controls-menu-enter {
+  animation: controls-menu-enter 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+.controls-menu-leave {
+  animation: controls-menu-leave 300ms ease-in both;
+}
+
+@keyframes controls-menu-enter {
+  from {
+    opacity: 0;
+    transform: translate(var(--menu-offset)) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+}
+@keyframes controls-menu-leave {
+  from {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(var(--menu-offset)) scale(0.9);
+  }
+}
+</style>
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/use-controls-island-layout.ts b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/use-controls-island-layout.ts
new file mode 100644
index 000000000..fcaec729f
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/use-controls-island-layout.ts
@@ -0,0 +1,89 @@
+import type { Ref } from 'vue'
+
+import type { ControlsIslandPlacement } from './use-controls-island-placement'
+
+import { useElementSize, useRafFn, useResizeObserver } from '@vueuse/core'
+import { computed, nextTick, watch } from 'vue'
+
+interface LayoutElements {
+  main: Readonly<Ref<HTMLElement | null>>
+  menu: Readonly<Ref<HTMLElement | null>>
+  available: Readonly<Ref<HTMLElement | null>>
+  gap: Readonly<Ref<HTMLElement | null>>
+  viewport: Readonly<Ref<HTMLElement | undefined>>
+  menuViewport: Readonly<Ref<HTMLElement | undefined>>
+  content: Readonly<Ref<HTMLElement | null>>
+}
+
+/**
+ * Owns renderer-local geometry and scroll alignment for one mounted Island.
+ * Measures unconstrained border boxes, so clipping and animation cannot change
+ * the direction decision. VueUse observers stop with the component scope.
+ */
+export function useControlsIslandLayout(elements: LayoutElements, expanded: Ref<boolean>, placement: ControlsIslandPlacement) {
+  const { isLeft, isTop, dock } = placement
+  const main = useElementSize(elements.main, undefined, { box: 'border-box' })
+  const menu = useElementSize(elements.menu, undefined, { box: 'border-box' })
+  const available = useElementSize(elements.available)
+  const gap = useElementSize(elements.gap)
+  const sideways = computed(() => menu.height.value > 0 && available.height.value > 0
+    && main.height.value + gap.width.value + menu.height.value > available.height.value)
+  const direction = computed(() => sideways.value
+    ? (isLeft.value ? 'right' : 'left')
+    : (isTop.value ? 'down' : 'up'))
+  const scrollWholeIsland = computed(() => main.height.value > available.height.value
+    || main.width.value > available.width.value
+    || (sideways.value && available.width.value - main.width.value - gap.width.value <= 0))
+  const panelStyle = computed(() => ({
+    maxWidth: scrollWholeIsland.value ? 'none' : `${Math.max(0, available.width.value - (sideways.value ? main.width.value + gap.width.value : 0))}px`,
+    maxHeight: scrollWholeIsland.value ? 'none' : `${Math.max(0, available.height.value - (sideways.value ? 0 : main.height.value + gap.width.value))}px`,
+  }))
+  const layoutClasses = computed(() => sideways.value
+    ? [isLeft.value ? 'flex-row-reverse' : 'flex-row', isTop.value ? 'items-start' : 'items-end']
+    : [isTop.value ? 'flex-col-reverse' : 'flex-col', isLeft.value ? 'items-start' : 'items-end'])
+  const arrowRotation = computed(() => (({ up: 0, right: 90, down: 180, left: 270 }[direction.value]) + (expanded.value ? 180 : 0)) % 360)
+  const motionOffset = computed(() => ({ up: '0, 2rem', down: '0, -2rem', left: '2rem, 0', right: '-2rem, 0' }[direction.value]))
+
+  function alignScrollPosition() {
+    const viewport = elements.viewport.value
+    if (!viewport)
+      return
+
+    viewport.scrollTop = isTop.value ? 0 : viewport.scrollHeight - viewport.clientHeight
+    viewport.scrollLeft = isLeft.value ? 0 : viewport.scrollWidth - viewport.clientWidth
+
+    // Focus visibility takes precedence over docking after a layout change.
+    const focused = document.activeElement
+    if (focused instanceof HTMLElement && viewport.contains(focused))
+      focused.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }
+
+  // NOTICE:
+  // Defer scroll alignment to the next animation frame after an observer runs.
+  // scrollIntoView can change scrollbar geometry during ResizeObserver delivery.
+  // Chromium then logs "ResizeObserver loop completed with undelivered notifications"
+  // during rapid Controls Island layout changes.
+  // Source/context: https://github.com/moeru-ai/airi/pull/2474#discussion_r3954626137
+  // Removal condition: Remove this scheduling when Chromium no longer logs the
+  // warning and the Controls Island browser tests pass without deferred alignment.
+  const { pause, resume } = useRafFn(() => {
+    pause()
+    alignScrollPosition()
+  }, { immediate: false })
+
+  // Observe actual geometry, never scroll offsets. User scrolling must persist.
+  useResizeObserver(elements.viewport, resume)
+  useResizeObserver(elements.content, resume)
+  watch([dock, expanded, direction, main.width, main.height, menu.width, menu.height, available.width, available.height], async () => {
+    await nextTick()
+    resume()
+  }, { flush: 'post' })
+  watch(expanded, async (open) => {
+    if (!open)
+      return
+    await nextTick()
+    elements.menuViewport.value?.scrollTo(0, 0)
+  }, { flush: 'post' })
+
+  return { direction, scrollWholeIsland, panelStyle, layoutClasses, arrowRotation, motionOffset }
+}
diff --git a/apps/stage-tamagotchi/src/renderer/pages/index.vue b/apps/stage-tamagotchi/src/renderer/pages/index.vue
index f3c3b1ad1..a3a508e78 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/index.vue
@@ -140,7 +140,7 @@ const isAroundWindowBorderFor250Ms = refDebounced(isAroundWindowBorder, 250)
 
 const setIgnoreMouseEvents = useElectronEventaInvoke(electron.window.setIgnoreMouseEvents)
 
-const hearingDialogOpen = computed(() => controlsIslandRef.value?.hearingDialogOpen ?? false)
+const controlsOverlayActive = computed(() => controlsIslandRef.value?.overlayActive ?? false)
 
 const modelSettingsRuntimeSnapshot = computed<ModelSettingsRuntimeSnapshot>(() => {
   const hasModel = !!stageModelSelectedUrl.value
@@ -247,7 +247,7 @@ const modelSettingsRuntimeSnapshot = computed<ModelSettingsRuntimeSnapshot>(() =
  * Upstream:
  * - {@link isOutsideFor250Ms} and {@link isAroundWindowBorderFor250Ms}
  * - {@link isOutsideWindow}, {@link isTransparent}, and {@link isTransparentForMouseEvents}
- * - {@link hearingDialogOpen}, {@link fadeOnHoverEnabled}, and {@link stagePaused}
+ * - {@link controlsOverlayActive}, {@link fadeOnHoverEnabled}, and {@link stagePaused}
  *
  * Downstream:
  * - {@link resolveFadeOnHoverInteraction}
@@ -261,8 +261,8 @@ function handleFadeOnHoverInteractionChange() {
     return
   }
 
-  if (hearingDialogOpen.value) {
-    // Hearing dialog/drawer is open; keep window interactive
+  if (controlsOverlayActive.value) {
+    // Portaled controls must receive clicks even outside the Island's bounds.
     isIgnoringMouseEvents.value = false
     shouldFadeOnCursorWithin.value = false
     setIgnoreMouseEvents([false, { forward: true }])
@@ -293,7 +293,7 @@ function handleFadeOnHoverInteractionChange() {
 }
 
 watch(
-  [isOutsideFor250Ms, isAroundWindowBorderFor250Ms, isOutsideWindow, isTransparent, isTransparentForMouseEvents, hearingDialogOpen, fadeOnHoverEnabled, stagePaused],
+  [isOutsideFor250Ms, isAroundWindowBorderFor250Ms, isOutsideWindow, isTransparent, isTransparentForMouseEvents, controlsOverlayActive, fadeOnHoverEnabled, stagePaused],
   handleFadeOnHoverInteractionChange,
   { immediate: true },
 )
diff --git a/packages/stage-ui/src/components/misc/profile-switcher-popover.vue b/packages/stage-ui/src/components/misc/profile-switcher-popover.vue
index cec2358ea..440616cf9 100644
--- a/packages/stage-ui/src/components/misc/profile-switcher-popover.vue
+++ b/packages/stage-ui/src/components/misc/profile-switcher-popover.vue
@@ -2,19 +2,22 @@
 import type { SelectContentProps } from 'reka-ui'
 
 import { Select } from '@proj-airi/ui'
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useElementBounding, useElementSize, useWindowSize } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, nextTick, ref, toRaw, watch } from 'vue'
+import { computed, nextTick, onScopeDispose, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useAiriCardStore } from '../../stores/modules/airi-card'
 
 const props = withDefaults(defineProps<Props>(), {
+  active: true,
   contentAlign: 'start',
   contentSide: 'bottom',
 })
 const emit = defineEmits<{
   (e: 'manage'): void
+  /** Includes the selector and its portaled create form for host interaction protection. */
+  (e: 'interactionChange', active: boolean): void
 }>()
 const CREATE_PROFILE_ACTION = '__create-profile__'
 const MANAGE_PROFILE_ACTION = '__manage-profile__'
@@ -23,9 +26,18 @@ type ProfileSelectValue = string | typeof CREATE_PROFILE_ACTION | typeof MANAGE_
 
 /** Placement preferences for the profile selector and its create form. */
 export interface Props {
-  /** Horizontal alignment before collision handling. */
+  /**
+   * Stops all overlays when the host menu closes.
+   * @default true
+   */
+  active?: boolean
+  /** Horizontal alignment before collision handling.
+   * @default 'start'
+   */
   contentAlign?: Extract<SelectContentProps['align'], 'start' | 'end'>
-  /** Vertical side before collision handling. */
+  /** Vertical side before collision handling.
+   * @default 'bottom'
+   */
   contentSide?: Extract<SelectContentProps['side'], 'top' | 'bottom'>
 }
 
@@ -39,6 +51,31 @@ const creatingNew = ref(false)
 const newProfileName = ref('')
 const nameInputRef = ref<HTMLInputElement>()
 const containerRef = ref<HTMLElement>()
+const { x: containerX, y: containerY, width: containerWidth, height: containerHeight } = useElementBounding(containerRef)
+const createFormRef = ref<HTMLElement>()
+const createContentRef = ref<HTMLElement>()
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+const { width: formWidth } = useElementSize(createFormRef, undefined, { box: 'border-box' })
+const { height: formHeight } = useElementSize(createContentRef, undefined, { box: 'border-box' })
+const createFormStyle = computed(() => {
+  // The portal cannot use the Island's scroll area. Fit it to the viewport,
+  // flip toward the larger vertical space, then clamp if neither side fits.
+  const margin = 8
+  const height = Math.min(formHeight.value, Math.max(0, windowHeight.value - margin * 2))
+  const above = containerY.value - margin * 2
+  const below = windowHeight.value - containerY.value - containerHeight.value - margin * 2
+  let topSide = props.contentSide === 'top'
+  if ((topSide ? above : below) < height)
+    topSide = above > below
+  const anchorLeft = props.contentAlign === 'start' ? containerX.value : containerX.value + containerWidth.value - formWidth.value
+  const anchorTop = topSide ? containerY.value - margin - height : containerY.value + containerHeight.value + margin
+  return {
+    left: `${Math.max(margin, Math.min(anchorLeft, windowWidth.value - formWidth.value - margin))}px`,
+    top: `${Math.max(margin, Math.min(anchorTop, windowHeight.value - height - margin))}px`,
+    width: 'min(14rem, calc(100dvw - 1rem))',
+    maxHeight: 'calc(100dvh - 1rem)',
+  }
+})
 
 const cardsList = computed(() =>
   Array.from(cards.value.entries()).map(([id, card]) => ({ id, name: card.name })),
@@ -78,11 +115,16 @@ const selectOptions = computed(() => [
   },
 ])
 
-watch(open, (isOpen) => {
-  if (!isOpen) {
+// Selector close and form open are one transition. Only the host becoming
+// inactive cancels both surfaces; Select closes itself after selection.
+watch(() => props.active, (active) => {
+  if (!active) {
+    open.value = false
     cancelCreate()
   }
 })
+watch(() => open.value || creatingNew.value, active => emit('interactionChange', active), { immediate: true })
+onScopeDispose(() => emit('interactionChange', false))
 
 watch(activeCardId, (value) => {
   selectedProfile.value = value
@@ -93,13 +135,17 @@ watch(selectedProfile, (value, previousValue) => {
     return
   }
 
+  // Restoring the active card after choosing "Save as new" is part of the
+  // close-to-create transition, not a user selection that cancels creation.
+  if (previousValue === CREATE_PROFILE_ACTION && value === activeCardId.value)
+    return
+
   handleSelection(value)
 })
 
 onClickOutside(containerRef, () => {
-  open.value = false
   cancelCreate()
-})
+}, { ignore: [createFormRef] })
 
 async function handleSelection(value: ProfileSelectValue) {
   if (value === CREATE_PROFILE_ACTION) {
@@ -110,11 +156,13 @@ async function handleSelection(value: ProfileSelectValue) {
 
   if (value === MANAGE_PROFILE_ACTION) {
     selectedProfile.value = activeCardId.value
+    cancelCreate()
     handleManage()
     return
   }
 
   await cardStore.activateCard(value)
+  cancelCreate()
 }
 
 async function showCreateInput() {
@@ -288,61 +336,66 @@ function toggleOpen() {
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
-      <div
-        v-if="creatingNew"
-        :class="[
-          'absolute z-[10011] w-56 rounded-xl border-2 p-2 shadow-sm backdrop-blur-xl',
-          props.contentSide === 'top' ? 'bottom-full mb-2' : 'top-full mt-2',
-          props.contentAlign === 'start' ? 'left-0' : 'right-0',
-          props.contentSide === 'top' && props.contentAlign === 'start' ? 'origin-bottom-left' : '',
-          props.contentSide === 'top' && props.contentAlign === 'end' ? 'origin-bottom-right' : '',
-          props.contentSide === 'bottom' && props.contentAlign === 'start' ? 'origin-top-left' : '',
-          props.contentSide === 'bottom' && props.contentAlign === 'end' ? 'origin-top-right' : '',
-          'border-neutral-200 bg-white/95 dark:border-neutral-800 dark:bg-neutral-900/95',
-        ]"
-      >
-        <div :class="['flex items-center gap-2']">
-          <input
-            ref="nameInputRef"
-            v-model="newProfileName"
-            type="text"
-            :placeholder="t('stage.profile-switcher.new-profile-name')"
-            :class="[
-              'min-w-0 flex-1 rounded-lg border-2 px-2 py-1 text-sm outline-none transition-colors',
-              'bg-neutral-50 text-neutral-800 placeholder:text-neutral-400',
-              'dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-500',
-              isDuplicateName
-                ? 'border-red-400 dark:border-red-600'
-                : 'border-neutral-100 focus:border-primary-300 dark:border-neutral-900 dark:focus:border-primary-400/50',
-            ]"
-            @keydown.enter="confirmCreate"
-            @keydown.escape="cancelCreate"
-          >
+      <Teleport to="body">
+        <div
+          v-if="creatingNew"
+          ref="createFormRef"
+          data-testid="profile-create-form"
+          :style="createFormStyle"
+          :class="[
+            'fixed z-[10011] overflow-auto rounded-xl shadow-sm backdrop-blur-xl',
+            props.contentSide === 'top' && props.contentAlign === 'start' ? 'origin-bottom-left' : '',
+            props.contentSide === 'top' && props.contentAlign === 'end' ? 'origin-bottom-right' : '',
+            props.contentSide === 'bottom' && props.contentAlign === 'start' ? 'origin-top-left' : '',
+            props.contentSide === 'bottom' && props.contentAlign === 'end' ? 'origin-top-right' : '',
+            'border-neutral-200 bg-white/95 dark:border-neutral-800 dark:bg-neutral-900/95',
+          ]"
+        >
+          <div ref="createContentRef" :class="['flex flex-wrap items-center justify-end gap-2 border-2 rounded-xl p-2']">
+            <input
+              ref="nameInputRef"
+              v-model="newProfileName"
+              type="text"
+              :placeholder="t('stage.profile-switcher.new-profile-name')"
+              :class="[
+                'min-w-0 w-full rounded-lg border-2 px-2 py-1 text-sm outline-none transition-colors',
+                'bg-neutral-50 text-neutral-800 placeholder:text-neutral-400',
+                'dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-500',
+                isDuplicateName
+                  ? 'border-red-400 dark:border-red-600'
+                  : 'border-neutral-100 focus:border-primary-300 dark:border-neutral-900 dark:focus:border-primary-400/50',
+              ]"
+              @keydown.enter="confirmCreate"
+              @keydown.escape="cancelCreate"
+            >
 
-          <button
-            :class="[
-              'shrink-0 p-1.5 transition',
-              'text-primary-500 hover:text-primary-600 dark:hover:text-primary-400',
-              (newProfileName.trim() && !isDuplicateName) ? '' : 'pointer-events-none opacity-30',
-            ]"
-            type="button"
-            @click="confirmCreate"
-          >
-            <div class="i-solar:check-circle-bold size-4.5" />
-          </button>
+            <button
+              :class="[
+                'shrink-0 p-1.5 transition',
+                'text-primary-500 hover:text-primary-600 dark:hover:text-primary-400',
+                (newProfileName.trim() && !isDuplicateName) ? '' : 'pointer-events-none opacity-30',
+              ]"
+              type="button"
+              :aria-label="t('stage.profile-switcher.save-as-new')"
+              :disabled="!newProfileName.trim() || isDuplicateName"
+              @click="confirmCreate"
+            >
+              <div class="i-solar:check-circle-bold size-4.5" />
+            </button>
 
-          <button
-            :class="[
-              'shrink-0 p-1.5 transition',
-              'text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300',
-            ]"
-            type="button"
-            @click="cancelCreate"
-          >
-            <div class="i-solar:close-circle-bold size-4.5" />
-          </button>
+            <button
+              :class="[
+                'shrink-0 p-1.5 transition',
+                'text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300',
+              ]"
+              type="button"
+              @click="cancelCreate"
+            >
+              <div class="i-solar:close-circle-bold size-4.5" />
+            </button>
+          </div>
         </div>
-      </div>
+      </Teleport>
     </Transition>
   </div>
 </template>