GCWing · bobleer · Aug 4, 2026 · Aug 4, 2026
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -1730,16 +1730,20 @@ $_section-header-height: 24px;
 }
 
 .bitfun-nav-panel__footer-menu {
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 0;
+  position: fixed;
   min-width: 148px;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
   padding: $size-gap-1;
   background: var(--bf-appearance-token-color-bg-elevated);
   border: 1px solid var(--bf-appearance-token-border-subtle);
   border-radius: $size-radius-base;
   box-shadow: 0 4px 12px var(--bf-appearance-token-color-overlay-black-30);
   z-index: 9999;
+  color: var(--bf-appearance-token-color-text-primary);
+  font-family: var(--bf-appearance-token-font-family-sans);
+  font-size: var(--bf-appearance-token-font-size-sm);
   transform-origin: bottom left;
   animation: bitfun-footer-menu-in $motion-fast $easing-decelerate forwards;
 

diff --git a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -1,4 +1,5 @@
-import React, { lazy, Suspense, useState, useCallback, useEffect } from 'react';
+import React, { lazy, Suspense, useState, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import {
   Settings,
   Info,
@@ -30,6 +31,8 @@ import {
   getRemoteConnectDisclaimerAgreed,
   setRemoteConnectDisclaimerAgreed,
 } from '../../RemoteConnectDialog/remoteConnectDisclaimerStorage';
+import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
+import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
 
 const RemoteConnectDialog = lazy(() => import('../../RemoteConnectDialog'));
 const AboutDialog = lazy(() =>
@@ -70,6 +73,16 @@ const PersistentFooterActions: React.FC = () => {
 
   const [menuOpen, setMenuOpen] = useState(false);
   const [menuClosing, setMenuClosing] = useState(false);
+  const menuTriggerRef = useRef<HTMLButtonElement>(null);
+  const menuPopoverRef = useRef<HTMLDivElement>(null);
+  const menuLayout = useAnchoredPopoverPosition({
+    open: menuOpen,
+    anchorRef: menuTriggerRef,
+    popoverRef: menuPopoverRef,
+    preferredPlacement: 'top',
+    alignment: 'start',
+    gap: 6,
+  });
   const [showAbout, setShowAbout] = useState(false);
   const [showRemoteConnect, setShowRemoteConnect] = useState(false);
   const [remoteInitialGroup, setRemoteInitialGroup] = useState<'network' | 'bot' | 'account' | undefined>(undefined);
@@ -183,6 +196,7 @@ const PersistentFooterActions: React.FC = () => {
           <div className="bitfun-nav-panel__footer-more-wrap">
             <Tooltip content={t('nav.moreOptions')} placement="right" followCursor disabled={menuOpen}>
               <button
+                ref={menuTriggerRef}
                 type="button"
                 className={`bitfun-nav-panel__footer-btn bitfun-nav-panel__footer-btn--icon${menuOpen ? ' is-active' : ''}`}
                 aria-label={t('nav.moreOptions')}
@@ -204,19 +218,26 @@ const PersistentFooterActions: React.FC = () => {
               </button>
             </Tooltip>
 
-            {menuOpen && (
+            {menuOpen && createPortal(
               <>
                 <div
                   className="bitfun-nav-panel__footer-backdrop"
                   onClick={closeMenu}
                 />
                 <div
+                  ref={menuPopoverRef}
                   className={`bitfun-nav-panel__footer-menu${menuClosing ? ' is-closing' : ''}`}
                   role="menu"
                   data-testid="nav-footer-menu"
                   data-bf-component="nav-panel"
                   data-bf-part="footerMenu"
                   data-bf-state={menuClosing ? 'closing' : 'open'}
+                  data-bf-placement={menuLayout?.placement ?? 'top'}
+                  style={{
+                    top: `${menuLayout?.top ?? 0}px`,
+                    left: `${menuLayout?.left ?? 0}px`,
+                    visibility: menuLayout ? 'visible' : 'hidden',
+                  }}
                 >
                   <button
                     type="button"
@@ -284,7 +305,8 @@ const PersistentFooterActions: React.FC = () => {
                     <span>{t('header.about')}</span>
                   </button>
                 </div>
-              </>
+              </>,
+              getAppearanceOverlayHost(),
             )}
           </div>
 

diff --git a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
@@ -402,18 +402,6 @@
     color: var(--bf-appearance-token-color-text-muted);
   }
 
-  &__agent-select {
-    .select__dropdown {
-      max-height: 156px;
-    }
-  }
-
-  &__session-select {
-    .select__dropdown {
-      max-height: 156px;
-    }
-  }
-
   &__warning {
     font-size: var(--bf-appearance-token-font-size-xs);
     color: var(--bf-appearance-token-color-error);
@@ -478,6 +466,11 @@
   }
 }
 
+.asv__agent-select-dropdown,
+.asv__session-select-dropdown {
+  max-height: min(156px, calc(100vh - 16px));
+}
+
 @media (max-width: 760px) {
   .asv {
     &__form-row {

diff --git a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.tsx
@@ -1097,6 +1097,7 @@ const ScheduledJobsView: React.FC<ScheduledJobsViewProps> = ({
                 searchable
                 clearable
                 className="asv__session-select"
+                dropdownClassName="asv__session-select-dropdown"
                 onChange={value => {
                   setValidationErrors(current => ({ ...current, sessionId: false }));
                   setDraft(c => ({ ...c, sessionId: String(value) }));
@@ -1118,6 +1119,7 @@ const ScheduledJobsView: React.FC<ScheduledJobsViewProps> = ({
                 error={validationErrors.agentType}
                 disabled={workspaceKind === WorkspaceKind.Assistant}
                 className="asv__agent-select"
+                dropdownClassName="asv__agent-select-dropdown"
                 renderOption={option => (
                   <div className="asv__agent-option">
                     <span className="asv__agent-option-label">{option.label}</span>

diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -1116,6 +1116,8 @@ const AgentsHomeView: React.FC = () => {
                     size="small"
                     searchable
                     className="bitfun-agents-scene__subagent-model-select model-select-presentation__select"
+                    dropdownClassName="model-select-presentation__dropdown"
+                    dropdownMode="inline"
                     options={subagentModelOptions}
                     value={selectedSubagentModelValue}
                     onChange={(value) => void handleSubagentModelChange(value)}

diff --git a/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss b/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
@@ -145,10 +145,10 @@ $ins-label:   12px;
     padding-bottom: 5px;
   }
 
-  .select__dropdown {
-    width: 340px;
-    right: auto;
-  }
+}
+
+.insights-scene__model-select-dropdown {
+  width: min(340px, calc(100vw - 48px));
 }
 
 .insights-model-select {
@@ -684,7 +684,6 @@ $ins-label:   12px;
     width: 100%;
     flex: 0 0 100%;
 
-    .select__dropdown { width: 100%; right: 0; }
   }
   .insights-scene__control-label { width: 100%; }
   .insights-meta-card__top { align-items: flex-start; flex-direction: column; }

diff --git a/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx b/src/web-ui/src/app/scenes/my-agent/InsightsScene.tsx
@@ -248,6 +248,8 @@ const InsightsScene: React.FC = () => {
             <span className="insights-scene__control-label">{t('insights.modelLabel')}</span>
             <Select
               className="insights-scene__model-select"
+              dropdownClassName="insights-scene__model-select-dropdown"
+              dropdownMatchTriggerWidth={false}
               value={selectedModel}
               options={modelOptions}
               renderValue={renderModelValue}

diff --git a/src/web-ui/src/app/scenes/pages/PagesScene.scss b/src/web-ui/src/app/scenes/pages/PagesScene.scss
@@ -371,8 +371,7 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     }
 
     .select__value,
-    .select__placeholder,
-    .select__option {
+    .select__placeholder {
       font-size: 13px;
     }
   }

diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantAvatarPicker.test.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantAvatarPicker.test.tsx
@@ -54,6 +54,7 @@ describe('AssistantAvatarPicker', () => {
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    document.querySelector('[data-bf-overlay-host="true"]')?.remove();
   });
 
   it('keeps a combined emoji sequence as one avatar', () => {
@@ -78,9 +79,10 @@ describe('AssistantAvatarPicker', () => {
 
     expect(trigger.getAttribute('aria-expanded')).toBe('true');
     const compassOption = Array.from(
-      container.querySelectorAll<HTMLButtonElement>('.acp-avatar-picker__option'),
+      document.querySelectorAll<HTMLButtonElement>('.acp-avatar-picker__option'),
     ).find((option) => option.textContent === '🧭');
     expect(compassOption).toBeTruthy();
+    expect(document.querySelector('.acp-avatar-picker__popover')?.parentElement?.getAttribute('data-bf-overlay-host')).toBe('true');
 
     act(() => compassOption?.click());
     expect(onChange).toHaveBeenCalledWith('🧭');
@@ -100,7 +102,7 @@ describe('AssistantAvatarPicker', () => {
     const trigger = container.querySelector('.acp-avatar-picker__trigger') as HTMLButtonElement;
     act(() => trigger.click());
 
-    expect(container.querySelector('.acp-avatar-picker__status')?.textContent)
+    expect(document.querySelector('.acp-avatar-picker__status')?.textContent)
       .toContain('identity.avatarSaved');
   });
 });
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantAvatarPicker.tsx b/src/web-ui/src/app/scenes/profile/views/AssistantAvatarPicker.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Bot, Check, Pencil, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Input } from '@/component-library';
 import type { IdentitySaveStatus } from '@/app/scenes/my-agent/useAgentIdentityDocument';
 import { ASSISTANT_AVATAR_PRESETS, firstAvatarGrapheme } from './assistantAvatar';
+import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
+import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
 
 interface AssistantAvatarPickerProps {
   value: string;
@@ -23,9 +26,18 @@ const AssistantAvatarPicker: React.FC<AssistantAvatarPickerProps> = ({
   const titleId = `${pickerId}-title`;
   const rootRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const displayedValue = useMemo(() => firstAvatarGrapheme(value), [value]);
   const [customValue, setCustomValue] = useState(displayedValue);
+  const popoverLayout = useAnchoredPopoverPosition({
+    open: isOpen,
+    anchorRef: triggerRef,
+    popoverRef,
+    preferredPlacement: 'bottom',
+    alignment: 'start',
+    gap: 8,
+  });
 
   useEffect(() => {
     setCustomValue(displayedValue);
@@ -35,7 +47,8 @@ const AssistantAvatarPicker: React.FC<AssistantAvatarPickerProps> = ({
     if (!isOpen) return;
 
     const handlePointerDown = (event: PointerEvent) => {
-      if (!rootRef.current?.contains(event.target as Node)) {
+      const target = event.target as Node;
+      if (!rootRef.current?.contains(target) && !popoverRef.current?.contains(target)) {
         setIsOpen(false);
       }
     };
@@ -93,12 +106,19 @@ const AssistantAvatarPicker: React.FC<AssistantAvatarPickerProps> = ({
         </span>
       </button>
 
-      {isOpen ? (
+      {isOpen ? createPortal(
         <div
+          ref={popoverRef}
           id={pickerId}
           className="acp-avatar-picker__popover"
           role="region"
           aria-labelledby={titleId}
+          data-bf-placement={popoverLayout?.placement ?? 'bottom'}
+          style={{
+            top: `${popoverLayout?.top ?? 0}px`,
+            left: `${popoverLayout?.left ?? 0}px`,
+            visibility: popoverLayout ? 'visible' : 'hidden',
+          }}
         >
           <div className="acp-avatar-picker__header">
             <div className="acp-avatar-picker__heading">
@@ -169,7 +189,8 @@ const AssistantAvatarPicker: React.FC<AssistantAvatarPickerProps> = ({
               {statusContent}
             </span>
           </div>
-        </div>
+        </div>,
+        getAppearanceOverlayHost(),
       ) : null}
     </div>
   );

diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
@@ -2846,17 +2846,19 @@ $acp-content-top: clamp(40px, 4.5vh, 52px);
   }
 
   &__popover {
-    position: absolute;
-    top: calc(100% + #{$size-gap-2});
-    left: 0;
+    position: fixed;
     z-index: $z-popover;
     width: 328px;
-    max-width: calc(100vw - 48px);
+    max-width: calc(100vw - 16px);
+    max-height: calc(100vh - 16px);
+    overflow-y: auto;
     padding: $size-gap-3;
     border: 1px solid var(--bf-appearance-token-border-subtle);
     border-radius: $size-radius-lg;
     background: var(--bf-appearance-token-color-bg-elevated);
     box-shadow: var(--bf-appearance-token-shadow-lg);
+    color: var(--bf-appearance-token-color-text-primary);
+    font-family: var(--bf-appearance-token-font-family-sans);
   }
 
   &__header {

diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.scss b/src/web-ui/src/app/scenes/shell/ShellNav.scss
@@ -201,17 +201,20 @@
   }
 
   &__dropdown-menu {
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
+    position: fixed;
     min-width: 200px;
     max-width: min(280px, calc(100vw - 24px));
+    max-height: calc(100vh - 16px);
+    overflow-y: auto;
     padding: 6px;
     border: 1px solid var(--bf-appearance-token-border-subtle);
     border-radius: 10px;
     background: var(--bf-appearance-token-color-bg-primary);
     box-shadow: 0 10px 28px rgba(var(--bf-appearance-token-color-static-black-rgb), 0.24);
-    z-index: 8;
+    z-index: $z-popover;
+    color: var(--bf-appearance-token-color-text-primary);
+    font-family: var(--bf-appearance-token-font-family-sans);
+    font-size: var(--bf-appearance-token-font-size-xs);
   }
 
   &__dropdown-item {