fix: playback speed dropdown color

src/DevTools/DevTools.tsx

@@ -12,6 +12,8 @@ import {
 } from './atoms/devtools-options';
 import { Extension, ExtensionProps } from './Extension';
 import { InternalDevToolsContext } from './internal-jotai-store';
+
+// TODO move these out to a separate entry point
 import './styles.css';
 
 export type DevToolsProps = ExtensionProps & {
@@ -20,6 +22,7 @@ export type DevToolsProps = ExtensionProps & {
   options?: DevToolsOptions;
 };
 
+// TODO move the id to a common place as a const
 const getRootElement = () => {
   const value =
     typeof window === 'undefined'

src/DevTools/Extension/components/Shell/components/TimeTravel/components/PlaybackSpeedDropdown.tsx

@@ -36,7 +36,15 @@ export const PlaybackSpeedDropdown = () => {
       maw={80}
       id="jotai-devtools-playback-speed-dropdown"
       data-testid="jotai-devtools-playback-speed-dropdown"
-      comboboxProps={{ position: 'top', keepMounted: false, zIndex: 99999 }}
+      comboboxProps={{
+        position: 'top',
+        keepMounted: false,
+        withinPortal: false,
+        zIndex: 99999,
+        portalProps: {
+          target: `#jotai-devtools-root`,
+        },
+      }}
     />
   );
 };

src/DevTools/styles.css

@@ -10,6 +10,7 @@
   font-size: var(--mantine-font-size-md);
 }
 
+/* TODO import more granular styles */
 @import '@mantine/core/styles.css';
 @import '@mantine/code-highlight/styles.css';
 @import './fonts/fonts.css';