From ee8019348ab6b79dce37aebd89dfe9a34fe88cf7 Mon Sep 17 00:00:00 2001
From: yash-signal <yash@signal.org>
Date: Mon, 5 Jan 2026 16:15:04 -0600
Subject: [PATCH] Add z-index to AxoBaseDialog to fix Call Quality Survey
 placement

---
 stylesheets/_variables.scss               |  2 ++
 stylesheets/components/Preferences.scss   |  7 +++++
 stylesheets/tailwind-config.css           | 36 +++++++++++++++++++++++
 ts/axo/_internal/AxoBaseDialog.dom.tsx    |  1 +
 ts/axo/_internal/AxoBaseMenu.dom.tsx      |  6 ++--
 ts/components/PreferencesInternal.dom.tsx |  4 +--
 6 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index f44e023efd..8567328894 100644
--- a/stylesheets/_variables.scss
+++ b/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;
diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss
index c2e6cfe001..f7789b623a 100644
--- a/stylesheets/components/Preferences.scss
+++ b/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;
diff --git a/stylesheets/tailwind-config.css b/stylesheets/tailwind-config.css
index c1cb70fed3..1282cfcbc5 100644
--- a/stylesheets/tailwind-config.css
+++ b/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-*);
+}
diff --git a/ts/axo/_internal/AxoBaseDialog.dom.tsx b/ts/axo/_internal/AxoBaseDialog.dom.tsx
index 773f764f13..4a161636ea 100644
--- a/ts/axo/_internal/AxoBaseDialog.dom.tsx
+++ b/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',
diff --git a/ts/axo/_internal/AxoBaseMenu.dom.tsx b/ts/axo/_internal/AxoBaseMenu.dom.tsx
index 22e41b58fd..c783c1d723 100644
--- a/ts/axo/_internal/AxoBaseMenu.dom.tsx
+++ b/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>
diff --git a/ts/components/PreferencesInternal.dom.tsx b/ts/components/PreferencesInternal.dom.tsx
index f14ba7c4ba..9e22e31847 100644
--- a/ts/components/PreferencesInternal.dom.tsx
+++ b/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}