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>