@memori.ai/memori-react 9.0.0-alpha.0 → 9.0.0-alpha.10

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -11,16 +11,22 @@
 
 .memori-chat-inputs--mic {
     z-index: 1;
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
     box-sizing: border-box;
+    flex-shrink: 0;
     padding: 0;
-    margin-left: 0.33rem;
-    color: var(--memori-primary);
+    border: none;
+    border-radius: 10px;
+    margin-left: 0;
+    background: transparent;
+    color: #888;
+    cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
     -webkit-touch-callout: none;
+    transition: background 0.15s ease, color 0.15s ease;
     -webkit-user-drag: none;
     -khtml-user-drag: none;
     -moz-user-drag: none;
@@ -30,21 +36,45 @@
 }
 
 .memori-chat-inputs--mic svg {
-    width: 20px;
-    height: 20px;
-    color: var(--memori-primary, #fff);
+    width: 18px;
+    height: 18px;
+    color: inherit;
     font-size: 1em;
     -webkit-user-select: none;
     user-select: none;
 }
 
 .memori-chat-inputs--mic:hover {
-    background-color: var(--memori-secondary-background) !important;
+    background-color: #f2eef5 !important;
+    color: #555 !important;
 }
 
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
-    box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
+    box-shadow: none !important;
+}
+
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
+    color: #555 !important;
+}
+
+/* Layout-scoped mic colors (FULL_PAGE / HIDDEN_CHAT / WEBSITE_ASSISTANT) */
+.memori-widget.memori-layout-fullpage .memori-chat-inputs--mic,
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic {
+    color: #9c98a4;
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-inputs--mic:hover {
+    background-color: #332f3a !important;
+    color: #d8d6de !important;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic:hover,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic:hover {
+    background-color: transparent !important;
+    color: #d8d6de !important;
 }
 
 /* Enhanced touch feedback for mobile */
@@ -55,17 +85,10 @@
     }
 
     .memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: #f2eef5;
     }
 }
 
-/* Prevent double-tap zoom on mobile - already defined above */
-
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
-    color: var(--memori-primary) !important;
-}
-
 @keyframes micBtnActivePulse {
     0% {
         transform: scale(1.25);
@@ -160,3 +183,12 @@
 [data-theme='dark'] .memori-chat-inputs--mic .lucide-mic {
     color: #fff;
 }
+
+.memori-widget.memori-layout-fullpage[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage .memori-chat-inputs--mic .lucide-mic,
+.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic .lucide-mic,
+.memori-widget.memori-layout-website_assistant[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic .lucide-mic {
+    color: inherit;
+}

package/src/components/MobileSessionPanel/MobileSessionPanel.tsx

@@ -9,12 +9,12 @@ import {
 } from 'lucide-react';
 import { Button, createAlertOptions, useAlertManager } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
-import { Message, User } from '@memori.ai/memori-api-client/dist/types';
-import './MobileSessionPanel.css';
+import { Message, User, Venue } from '@memori.ai/memori-api-client/dist/types';
 import { getErrori18nKey } from '../../helpers/error';
 import { imgMimeTypes } from '../../helpers/utils';
 import GasStation from '../icons/GasStation';
 import { ChatConsumptionContent } from '../Header/ChatConsumptionDropdown';
+import { PositionPopoverContent } from '../PositionPopover/PositionPopover';
 type SessionAction = {
   key: string;
   icon: React.ReactNode;
@@ -67,6 +67,8 @@ export interface MobileSessionPanelProps {
   locationUnknownLabel?: string;
   locationEnableLabel?: string;
   locationDisableLabel?: string;
+  venue?: Venue;
+  setVenue?: (venue?: Venue) => void;
   knownFactsDescription?: string;
   knownFactsCtaLabel?: string;
   knownFactsCountLabel?: string;
@@ -179,6 +181,8 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
   isLoggedIn = false,
   loginLabel = 'Log in',
   onLogin,
+  venue,
+  setVenue,
 }) => {
   const panelRef = useRef<HTMLElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
@@ -720,35 +724,44 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                 : knownFactsPageTitle}
             </h3>
             {activeView === 'location' ? (
-              <div className="memori-mobile-session-panel--page-content">
-                <p className="memori-mobile-session-panel--meta-label">
-                  {locationStatusLabel}
-                </p>
-                <p className="memori-mobile-session-panel--meta-value">
-                  {locationPlace || locationUnknownLabel}
-                </p>
-                <div className="memori-mobile-session-panel--page-actions">
-                  <Button
-                    variant="toolbar"
-                    size="sm"
-                    className={`memori-mobile-session-panel--page-btn ${
-                      isLocationEnabled
-                        ? 'memori-mobile-session-panel--page-btn-active'
-                        : ''
-                    }`}
-                    onClick={onLocationEnable}
-                  >
-                    <span>{locationEnableLabel}</span>
-                  </Button>
-                  <Button
-                    variant="toolbar"
-                    size="sm"
-                    className="memori-mobile-session-panel--page-btn memori-mobile-session-panel--page-btn-secondary"
-                    onClick={onLocationDisable}
-                  >
-                    {locationDisableLabel}
-                  </Button>
-                </div>
+              <div className="memori-mobile-session-panel--page-content memori-mobile-session-panel--location-content">
+                {setVenue ? (
+                  <PositionPopoverContent
+                    venue={venue}
+                    setVenue={setVenue}
+                  />
+                ) : (
+                  <>
+                    <p className="memori-mobile-session-panel--meta-label">
+                      {locationStatusLabel}
+                    </p>
+                    <p className="memori-mobile-session-panel--meta-value">
+                      {locationPlace || locationUnknownLabel}
+                    </p>
+                    <div className="memori-mobile-session-panel--page-actions">
+                      <Button
+                        variant="toolbar"
+                        size="sm"
+                        className={`memori-mobile-session-panel--page-btn ${
+                          isLocationEnabled
+                            ? 'memori-mobile-session-panel--page-btn-active'
+                            : ''
+                        }`}
+                        onClick={onLocationEnable}
+                      >
+                        <span>{locationEnableLabel}</span>
+                      </Button>
+                      <Button
+                        variant="toolbar"
+                        size="sm"
+                        className="memori-mobile-session-panel--page-btn memori-mobile-session-panel--page-btn-secondary"
+                        onClick={onLocationDisable}
+                      >
+                        {locationDisableLabel}
+                      </Button>
+                    </div>
+                  </>
+                )}
               </div>
             ) : activeView === 'share' ? (
               <div className="memori-mobile-session-panel--page-content memori-mobile-session-panel--share-content">

package/src/components/PoweredBy/PoweredBy.css

@@ -10,7 +10,7 @@
     /* border: 1px solid var(--memori-border-color); */
     border-radius: 9999px;
     /* background-color: var(--memori-secondary-background); */
-    color: var(--memori-text-color);
+    color: color-mix(in srgb, var(--memori-text-color) 45%, transparent);
     font-size: 0.75rem;
     font-weight: 500;
     gap: 0.5rem;
@@ -22,6 +22,7 @@
     width: 1.25rem;
     height: 1.25rem;
     flex-shrink: 0;
+    opacity: 0.55;
 }
 
 .memori--powered-by-label {
@@ -31,7 +32,7 @@
 }
 
 .memori--powered-by-label a {
-    color: var(--memori-text-color);
+    color: inherit;
     text-decoration: underline;
     text-underline-offset: 2px;
 }
@@ -46,4 +47,11 @@
     .memori-widget .memori--powered-by {
         display: none !important;
     }
+
+    /* Keep the footer strip visible under the input on compact chat layouts */
+    .memori-widget.memori-layout-chat .memori--powered-by,
+    .memori-widget.memori-layout-website_assistant .memori--powered-by,
+    .memori-widget.memori-layout-hidden_chat .memori--powered-by {
+        display: flex !important;
+    }
 }

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -1,4 +1,5 @@
 import { Drawer, Checkbox, Button, Slider, Tooltip } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { useTranslation } from 'react-i18next';
 import { setLocalConfig } from '../../helpers/configuration';
 import { Props as WidgetProps } from '../MemoriWidget/MemoriWidget';
@@ -46,9 +47,11 @@ const SettingsDrawer = ({
   isAvatar3d,
 }: Props) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       className="memori-settings-drawer"
       open={open}
       onClose={onClose}

package/src/components/ShareButton/ShareButton.tsx

@@ -552,6 +552,7 @@ const ShareButton: React.FC<Props> = ({
             <Button
               {...props}
               variant={triggerVariant}
+              title={String(triggerLabel || t('widget.share') || 'Share')}
               aria-label={String(
                 triggerLabel || t('widget.share') || 'Share'
               )}
@@ -564,9 +565,11 @@ const ShareButton: React.FC<Props> = ({
                 isShareMenuOpen && 'memori-button--active'
               )}
             >
-              {triggerMode === 'menu-item'
-                ? triggerLabel || t('widget.share')
-                : undefined}
+              {triggerMode === 'menu-item' || triggerLabel ? (
+                <span className="memori-header--action-label">
+                  {triggerLabel || t('widget.share')}
+                </span>
+              ) : undefined}
             </Button>
           )}
         />

package/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`renders ShareButton aligned left unchanged 1`] = `
     class="memori-dropdown memori-share-button memori-share-button--align-left"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1d:"
       >
         <button
@@ -19,6 +19,7 @@ exports[`renders ShareButton aligned left unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:r1e:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -88,10 +89,10 @@ exports[`renders ShareButton unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r5:"
       >
         <button
@@ -101,6 +102,7 @@ exports[`renders ShareButton unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:r6:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -170,10 +172,10 @@ exports[`renders ShareButton with button not primary unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:rt:"
       >
         <button
@@ -183,6 +185,7 @@ exports[`renders ShareButton with button not primary unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:ru:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -252,10 +255,10 @@ exports[`renders ShareButton with other tenant img set unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1t:"
       >
         <button
@@ -265,6 +268,7 @@ exports[`renders ShareButton with other tenant img set unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:r1u:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -334,10 +338,10 @@ exports[`renders ShareButton with share chat unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r25:"
       >
         <button
@@ -347,6 +351,7 @@ exports[`renders ShareButton with share chat unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:r26:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -416,10 +421,10 @@ exports[`renders ShareButton with tenant img set unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1l:"
       >
         <button
@@ -429,6 +434,7 @@ exports[`renders ShareButton with tenant img set unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:r1m:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -498,10 +504,10 @@ exports[`renders ShareButton with title unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:rl:"
       >
         <button
@@ -511,6 +517,7 @@ exports[`renders ShareButton with title unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:rm:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -580,10 +587,10 @@ exports[`renders ShareButton with url unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:rd:"
       >
         <button
@@ -593,6 +600,7 @@ exports[`renders ShareButton with url unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:re:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span
@@ -662,10 +670,10 @@ exports[`renders ShareButton without qr code unchanged 1`] = `
     class="memori-dropdown memori-share-button"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r15:"
       >
         <button
@@ -675,6 +683,7 @@ exports[`renders ShareButton without qr code unchanged 1`] = `
           class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
           id="base-ui-:r16:"
           tabindex="0"
+          title="widget.share"
           type="button"
         >
           <span

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -370,3 +370,25 @@ WithCompletionProviderDown.args = {
   onClickStart: () => {},
   _TEST_forceProviderStatus: 'major',
 };
+
+/** Public agent whose owner has run out of credits: the start button is
+ * disabled and a "not enough credits" badge is shown instead of starting a
+ * session or asking for a password. */
+export const NotEnoughCredits = Template.bind({});
+NotEnoughCredits.args = {
+  memori: {
+    ...memori,
+    privacyType: 'PUBLIC',
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  setVenue: () => {},
+  openPositionPopover: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+  notEnoughCredits: true,
+};

package/src/components/StartPanel/StartPanel.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { memori, tenant, sessionID, integration, user } from '../../mocks/data';
 import StartPanel from './StartPanel';
 
@@ -306,3 +307,65 @@ it('renders StartPanel with completion provider down unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders StartPanel with not enough credits unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      setVenue={jest.fn()}
+      openPositionPopover={() => {}}
+      instruct={false}
+      clickedStart={false}
+      onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
+      notEnoughCredits
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+// When the agent owner has not enough credits, opening the chat for a PUBLIC
+// agent must not start a session nor ask for a password: the start button is
+// disabled and a "not enough credits" badge is shown instead.
+it('blocks start and shows credits badge when owner has not enough credits', () => {
+  const onClickStart = jest.fn();
+  const { container, getByText, queryByPlaceholderText } = render(
+    <StartPanel
+      memori={{ ...memori, privacyType: 'PUBLIC' }}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      setVenue={jest.fn()}
+      openPositionPopover={() => {}}
+      instruct={false}
+      clickedStart={false}
+      onClickStart={onClickStart}
+      setShowLoginDrawer={jest.fn()}
+      notEnoughCredits
+    />
+  );
+
+  const startButton = container.querySelector(
+    '.memori--start-actions__start'
+  ) as HTMLButtonElement;
+  expect(startButton).toBeInTheDocument();
+  expect(startButton).toBeDisabled();
+
+  // Clicking the disabled button must not attempt to open a session.
+  fireEvent.click(startButton);
+  expect(onClickStart).not.toHaveBeenCalled();
+
+  // No password field is ever rendered for a public agent.
+  expect(queryByPlaceholderText('Password')).not.toBeInTheDocument();
+
+  // The credits badge is rendered (tooltip content is portaled on hover by
+  // @memori.ai/ui and is covered by BlockedMemoriBadge unit tests).
+  const badge = container.querySelector('.blocked-memori-badge--wrapper');
+  expect(badge).toBeInTheDocument();
+  expect(getByText('memoriBlockedTitle')).toBeInTheDocument();
+});

package/src/components/StartPanel/StartPanel.tsx

@@ -27,6 +27,8 @@ import CompletionProviderStatus, {
   Props as CPSProps,
 } from '../CompletionProviderStatus/CompletionProviderStatus';
 import { Expandable } from '@memori.ai/ui';
+import { usePressTooltip } from '../../helpers/usePressTooltip';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
 /**
  * Sentinel values used as non-selectable section headers in the language
@@ -96,6 +98,11 @@ const StartPanel: React.FC<Props> = ({
   showFullDescriptionOnMobile = false,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
+  const boardOfExpertsTooltip = usePressTooltip();
+  const nsfwTooltip = usePressTooltip();
+  const deepThoughtTooltip = usePressTooltip();
+  const privacyTooltip = usePressTooltip();
   const [translatedDescription, setTranslatedDescription] = useState(
     memori.description
   );
@@ -213,21 +220,35 @@ const StartPanel: React.FC<Props> = ({
       >
         {!!memori.enableBoardOfExperts && (
           <div className="memori--board-of-experts">
-            <Tooltip align="left" content={t('boardOfExperts')}>
+            <Tooltip
+              align="left"
+              content={t('boardOfExperts')}
+              {...boardOfExpertsTooltip.tooltipProps}
+            >
               <Button
                 type="button"
                 variant="ghost"
                 shape="circle"
                 aria-label={t('boardOfExperts') || 'Board of Experts'}
                 icon={<Users aria-hidden />}
+                {...boardOfExpertsTooltip.pressTriggerProps}
               />
             </Tooltip>
           </div>
         )}
         {!!memori.nsfw && (
           <div className="memori--nsfw">
-            <Tooltip align="left" content={t('nsfw')}>
-              <span title={t('nsfw') || 'NSFW'}>🔞</span>
+            <Tooltip
+              align="left"
+              content={t('nsfw')}
+              {...nsfwTooltip.tooltipProps}
+            >
+              <span
+                title={t('nsfw') || 'NSFW'}
+                {...nsfwTooltip.pressTriggerProps}
+              >
+                🔞
+              </span>
             </Tooltip>
           </div>
         )}
@@ -453,6 +474,7 @@ const StartPanel: React.FC<Props> = ({
                               leaveDelay={150}
                               sideOffset={8}
                               content={t('deepThoughtHelper')}
+                              {...deepThoughtTooltip.tooltipProps}
                               slotProps={{
                                 positioner: {
                                   className:
@@ -471,6 +493,7 @@ const StartPanel: React.FC<Props> = ({
                                 aria-label={String(
                                   t('deepThoughtHelper') ?? 'Deep Thought help'
                                 )}
+                                {...deepThoughtTooltip.pressTriggerProps}
                               >
                                 <Info className="memori--settings-section__inline-info-icon" />
                               </Button>
@@ -557,6 +580,7 @@ const StartPanel: React.FC<Props> = ({
                               </a>
                             </div>
                           }
+                          {...privacyTooltip.tooltipProps}
                           slotProps={{
                             positioner: {
                               className: 'memori--privacy-popover-positioner',
@@ -572,6 +596,7 @@ const StartPanel: React.FC<Props> = ({
                             size="sm"
                             className="memori--privacy-popover-trigger memori--settings-section__info-trigger"
                             aria-label={String(t('privacyPolicy') ?? '')}
+                            {...privacyTooltip.pressTriggerProps}
                           >
                             <Info className="memori--settings-section__inline-info-icon" />
                           </Button>
@@ -660,6 +685,7 @@ const StartPanel: React.FC<Props> = ({
           )}
       </div>
       <Modal
+        container={surfaceEl ?? undefined}
         open={isMobile && mobileInfoModal !== null}
         onClose={() => setMobileInfoModal(null)}
         title={