@codecademy/gamut

Index: package/dist/Form/SelectDropdown/styles.js
===================================================================
--- package/dist/Form/SelectDropdown/styles.js
+++ package/dist/Form/SelectDropdown/styles.js
@@ -1,11 +1,10 @@
-import { css, states, variant } from '@codecademy/gamut-styles';
+import { css, states, variant, zIndices } from '@codecademy/gamut-styles';
 import { dismissSharedStyles, tagBaseStyles, tagLabelFontSize, tagLabelPadding } from '../../Tag/styles';
 import { formBaseComponentStyles, formBaseFieldStylesObject, formFieldDisabledStyles, formFieldPaddingStyles, InputSelectors } from '../styles';
 const selectDropdownStyles = css({
   ...formBaseFieldStylesObject,
-  display: 'flex',
-  zIndex: 3
+  display: 'flex'
 });
 const selectFocusStyles = {
   color: 'primary',
   borderColor: 'currentColor',
@@ -146,8 +145,14 @@
           right: 0
         } : {})
       };
     },
+    menuPortal: provided => ({
+      ...provided,
+      // The menu is portaled to the body, so it stacks at the page root as a popover —
+      // above sticky headers and modal content. A raw `zIndex` prop overrides as an escape hatch.
+      zIndex: zIndex ?? zIndices.popover
+    }),
     menuList: (provided, state) => {
       const sizeInteger = state.selectProps.size === 'small' ? 2 : 3;
       const maxHeight = `${(state.selectProps.shownOptionsLimit ?? 6) * sizeInteger}rem`;
       return {