Add z-index to AxoBaseDialog to fix Call Quality Survey placement

stylesheets/_variables.scss

@@ -287,6 +287,7 @@ $calling-background-color: $color-gray-90;
 $calling-local-preview-normal-width: 106.67px;
 
 // General
+// Keep in sync with --legacy-z-index-* in stylesheets/tailwind-config.css
 
 $z-index-negative: -1;
 $z-index-base: 1;
@@ -304,6 +305,7 @@ $z-index-window-controls: 10000;
 // Component specific
 // The scroll down button should be above everything in the timeline but
 // popups, tooltips, toasts, and other items should stack above it.
+// Keep in sync with --legacy-z-index-* in stylesheets/tailwind-config.css
 $z-index-story-meta: 3;
 $z-index-scroll-down-button: 10;
 $z-index-stories: 98;

stylesheets/components/Preferences.scss

@@ -455,6 +455,13 @@ $secondary-text-color: light-dark(
       text-align: start;
     }
   }
+  &__one-third-flow--justify-end {
+    display: inline-flex;
+    justify-content: flex-end;
+    @container (max-width: 350px) {
+      justify-content: flex-start;
+    }
+  }
   &__full-flow {
     vertical-align: middle;
     display: inline-block;

stylesheets/tailwind-config.css

@@ -438,3 +438,39 @@
   --default-scrollbar-track: transparent;
   --default-scrollbar-thumb: var(--color-label-placeholder);
 }
+
+/**
+ * Legacy z-index values
+ * Keep in sync with $z-index-* variables in stylesheets/_variables.scss
+ */
+
+@theme {
+  /* General */
+  --legacy-z-index-negative: -1;
+  --legacy-z-index-base: 1;
+  --legacy-z-index-above-base: 2;
+  --legacy-z-index-above-above-base: 3;
+  --legacy-z-index-megaphone: 75;
+  --legacy-z-index-popup-overlay: 99;
+  --legacy-z-index-popup: 100;
+  --legacy-z-index-context-menu: 125;
+  --legacy-z-index-tooltip: 150;
+  --legacy-z-index-toast: 200;
+  --legacy-z-index-on-top-of-everything: 9000;
+  --legacy-z-index-window-controls: 10000;
+
+  /* Component specific */
+  --legacy-z-index-story-meta: 3;
+  --legacy-z-index-scroll-down-button: 10;
+  --legacy-z-index-stories: 98;
+  --legacy-z-index-calling-container: 100;
+  --legacy-z-index-calling: 101;
+  --legacy-z-index-modal-host: 102;
+  --legacy-z-index-above-popup: 103;
+  --legacy-z-index-calling-pip: 104;
+  --legacy-z-index-above-context-menu: 126;
+}
+
+@utility legacy-z-index-* {
+  z-index: --value(--legacy-z-index-*);
+}

ts/axo/_internal/AxoBaseDialog.dom.tsx

@@ -32,6 +32,7 @@ export namespace AxoBaseDialog {
    */
 
   export const overlayStyles = tw(
+    'legacy-z-index-modal-host',
     'absolute inset-0 flex items-center-safe justify-center-safe bg-background-overlay p-4',
     // Allow the entire overlay to be scrolled in case the window is extremely small
     'overflow-auto scrollbar-width-none',

ts/axo/_internal/AxoBaseMenu.dom.tsx

@@ -6,9 +6,9 @@ import { tw } from '../tw.dom.js';
 import { AxoSymbol } from '../AxoSymbol.dom.js';
 import { isTestOrMockEnvironment } from '../../environment.std.js';
 
-// Pulled from $z-index-context-menu. In the future we should be relying more
-// on insert order of dialogs/popovers/menus into portals
-const LEGACY_CONTEXT_MENU_Z_INDEX = tw('z-[125]');
+// In the future we should be relying more on insert order of
+// dialogs/popovers/menus into portals
+const LEGACY_CONTEXT_MENU_Z_INDEX = tw('legacy-z-index-context-menu');
 
 export namespace AxoBaseMenu {
   // <Content/SubContent>

ts/components/PreferencesInternal.dom.tsx

@@ -496,9 +496,9 @@ export function PreferencesInternal({
       <SettingsRow title="Call Quality Survey Testing">
         <FlowingSettingsControl>
           <div className="Preferences__two-thirds-flow">
-            Disable 24h cooldown (show survey after every call)
+            Disable 24h cooldown
           </div>
-          <div className="Preferences__one-third-flow Preferences__one-third-flow--align-right">
+          <div className="Preferences__one-third-flow Preferences__one-third-flow--justify-end">
             <AxoSwitch.Root
               checked={callQualitySurveyCooldownDisabled}
               onCheckedChange={setCallQualitySurveyCooldownDisabled}