diff --git a/.changeset/tile-editor-drawer.md b/.changeset/tile-editor-drawer.md
new file mode 100644
index 0000000000..d7f9e2d646
--- /dev/null
+++ b/.changeset/tile-editor-drawer.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+feat: Move dashboard tile creation/editing from a modal into a right-side drawer. Display Settings (including the heatmap variant) now dock as a full-height side panel next to the editor/preview instead of stacking a second drawer, so the tile stays visible while its display options are changed and a single Esc press just closes the panel rather than closing everything at once.
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 5fc4cec398..8b0abcd02d 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -63,11 +63,11 @@ import {
   Box,
   Breadcrumbs,
   Button,
+  Drawer,
   Flex,
   Group,
   Indicator,
   Menu,
-  Modal,
   Paper,
   Popover,
   Portal,
@@ -1418,7 +1418,7 @@ const Tile = forwardRef(
   },
 );
 
-const EditTileModal = ({
+const EditTileDrawer = ({
   dashboardId,
   chart,
   onClose,
@@ -1434,9 +1434,12 @@ const EditTileModal = ({
   onSave: (chart: Tile) => void;
 }) => {
   const contextZIndex = useZIndex();
-  const modalZIndex = contextZIndex + 10;
+  const drawerZIndex = contextZIndex + 10;
   const confirm = useConfirm();
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  // While a settings side panel is docked, hand Esc over to the panel so it
+  // closes only the panel instead of dismissing the whole tile editor.
+  const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
 
   // Reset dirty state only when a *different* tile is opened, not on every
   // chart-object reference change (onSubmit recreates the chart object with
@@ -1469,18 +1472,23 @@ const EditTileModal = ({
   }, [confirm, isSaving, hasUnsavedChanges, onClose]);
 
   return (
-    <Modal
+    <Drawer
       opened={chart != null}
       onClose={handleClose}
+      closeOnEscape={!settingsPanelOpen}
       withCloseButton={false}
-      centered
+      position="right"
       size="90%"
-      padding="xs"
-      zIndex={modalZIndex}
+      padding={0}
+      zIndex={drawerZIndex}
+      // Full-height flex body: the editor column scrolls on its own and the
+      // Display Settings panel docks full-height beside it, so neither the body
+      // nor the panel shows a stray horizontal scrollbar.
+      styles={{ body: { height: '100%', padding: 0, overflow: 'hidden' } }}
     >
       {chart != null && (
-        <ZIndexContext.Provider value={modalZIndex + 10}>
-          {/* Isolate chart cross-syncing to this edit modal: the preview chart
+        <ZIndexContext.Provider value={drawerZIndex + 10}>
+          {/* Isolate chart cross-syncing to this edit drawer: the preview chart
               must not drive shadow tooltips on the dashboard tiles behind it. */}
           <IsolatedChartSyncProvider>
             <EditTimeChartForm
@@ -1496,13 +1504,14 @@ const EditTileModal = ({
               }}
               onClose={handleClose}
               onDirtyChange={setHasUnsavedChanges}
+              onSettingsPanelOpenChange={setSettingsPanelOpen}
               isDashboardForm
               autoRun
             />
           </IsolatedChartSyncProvider>
         </ZIndexContext.Provider>
       )}
-    </Modal>
+    </Drawer>
   );
 };
 
@@ -2918,7 +2927,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       </Head>
       {!isKioskMode && <OnboardingModal />}
       {!isKioskMode && (
-        <EditTileModal
+        <EditTileDrawer
           dashboardId={dashboardId}
           chart={editedTile}
           onClose={() => {
diff --git a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
index ba38dac8d1..3ad5b1859b 100644
--- a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
+++ b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import {
   ChartConfigWithDateRange,
@@ -17,6 +17,7 @@ import {
   Stack,
   Text,
 } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
 
 import { shouldFillNullsWithZero } from '@/ChartUtils';
 import { DEFAULT_SERIES_LIMIT } from '@/defaults';
@@ -32,6 +33,7 @@ import {
 import { ColorSwatchInput } from './ColorSwatchInput';
 import { CheckBoxControlled } from './InputControlled';
 import { DEFAULT_NUMBER_FORMAT, NumberFormatForm } from './NumberFormat';
+import SettingsSidePanel from './SettingsSidePanel';
 
 export type ChartConfigDisplaySettings = Pick<
   ChartConfigWithDateRange,
@@ -76,6 +78,14 @@ interface ChartDisplaySettingsDrawerProps {
   onChange: (settings: ChartConfigDisplaySettings, isDirty: boolean) => void;
   onClose: () => void;
   isPerSeriesNumberFormatAllowed?: boolean;
+  /**
+   * Render the settings as an in-place side panel (no Drawer overlay) instead
+   * of a nested drawer. Used inside the tile editor drawer so opening Display
+   * Settings docks a panel beside the editor/preview rather than stacking a
+   * second drawer on top (which made a single Esc press close both) — and keeps
+   * the tile visible while its display options are changed.
+   */
+  asPanel?: boolean;
 }
 
 function applyDefaultSettings(
@@ -115,6 +125,7 @@ export default function ChartDisplaySettingsDrawer({
   onClose,
   previousDateRange,
   isPerSeriesNumberFormatAllowed = false,
+  asPanel = false,
 }: ChartDisplaySettingsDrawerProps) {
   const appliedDefaults = useMemo(
     () => applyDefaultSettings(settings, defaultNumberFormat),
@@ -131,9 +142,20 @@ export default function ChartDisplaySettingsDrawer({
     defaultValues: appliedDefaults,
   });
 
+  // Reset only on the closed→open transition so every dismiss path — Apply,
+  // Cancel, Esc, or a tab change that closes the panel via the bare disclosure —
+  // behaves like cancel: abandoned edits never linger to be written by the next
+  // Apply. This is edge-triggered on `opened` (via a ref) rather than on
+  // `appliedDefaults` identity: `defaultNumberFormat` is a fresh object literal
+  // on every render, so a level-triggered reset would fire on each keystroke in
+  // the main form while the panel is open, silently discarding unapplied edits.
+  const wasOpenedRef = useRef(false);
   useEffect(() => {
-    reset(appliedDefaults);
-  }, [appliedDefaults, reset]);
+    if (opened && !wasOpenedRef.current) {
+      reset(appliedDefaults);
+    }
+    wasOpenedRef.current = opened;
+  }, [opened, appliedDefaults, reset]);
 
   const fillNulls = useWatch({ control, name: 'fillNulls' });
   const isFillNullsEnabled = shouldFillNullsWithZero(fillNulls);
@@ -213,83 +235,50 @@ export default function ChartDisplaySettingsDrawer({
   const showBackgroundChart = displayType === DisplayType.Number;
   const isBackgroundChartDisabled = configType === 'sql';
 
-  return (
-    <Drawer
-      title="Display Settings"
-      opened={opened}
-      onClose={handleClose}
-      position="right"
-    >
-      <Stack>
-        {isTimeChart && (
-          <>
-            <CheckBoxControlled
-              control={control}
-              name="alignDateRangeToGranularity"
-              size="xs"
-              label="Show Complete Intervals"
-            />
-            <Box>
-              <Checkbox
-                size="xs"
-                label="Fill Missing Intervals with Zero"
-                checked={isFillNullsEnabled}
-                onChange={e => {
-                  setValue('fillNulls', e.currentTarget.checked ? 0 : false);
-                }}
-              />
-            </Box>
-            <CheckBoxControlled
-              control={control}
-              name="compareToPreviousPeriod"
-              size="xs"
-              label="Compare to Previous Period"
-              description={
-                previousDateRange && (
-                  <>
-                    (
-                    <FormatTime value={previousDateRange[0]} format="short" />
-                    {' - '}
-                    <FormatTime value={previousDateRange[1]} format="short" />)
-                  </>
-                )
-              }
-            />
-            <CheckBoxControlled
-              control={control}
-              name="fitYAxisToData"
+  const content = (
+    <Stack>
+      {isTimeChart && (
+        <>
+          <CheckBoxControlled
+            control={control}
+            name="alignDateRangeToGranularity"
+            size="xs"
+            label="Show Complete Intervals"
+          />
+          <Box>
+            <Checkbox
               size="xs"
-              label="Fit Y-Axis to Data"
-              description="Start the y-axis at the minimum of the displayed data instead of zero. Only applicable to line charts."
+              label="Fill Missing Intervals with Zero"
+              checked={isFillNullsEnabled}
+              onChange={e => {
+                setValue('fillNulls', e.currentTarget.checked ? 0 : false);
+              }}
             />
-            {showSeriesLimit && (
-              <Box>
-                <Controller
-                  control={control}
-                  name="seriesLimit"
-                  render={({ field: { onChange, value } }) => (
-                    <NumberInput
-                      size="xs"
-                      label="Series Limit"
-                      description="Maximum number of series fetched for a group-by chart. Leave empty to fetch every series."
-                      placeholder={`Disabled (e.g. ${DEFAULT_SERIES_LIMIT})`}
-                      min={1}
-                      allowDecimal={false}
-                      value={value ?? ''}
-                      onChange={v =>
-                        onChange(v === '' || v == null ? null : Number(v))
-                      }
-                    />
-                  )}
-                />
-              </Box>
-            )}
-            <Divider />
-          </>
-        )}
-
-        {showCategoricalLimit && (
-          <>
+          </Box>
+          <CheckBoxControlled
+            control={control}
+            name="compareToPreviousPeriod"
+            size="xs"
+            label="Compare to Previous Period"
+            description={
+              previousDateRange && (
+                <>
+                  (
+                  <FormatTime value={previousDateRange[0]} format="short" />
+                  {' - '}
+                  <FormatTime value={previousDateRange[1]} format="short" />)
+                </>
+              )
+            }
+          />
+          <CheckBoxControlled
+            control={control}
+            name="fitYAxisToData"
+            size="xs"
+            label="Fit Y-Axis to Data"
+            description="Start the y-axis at the minimum of the displayed data instead of zero. Only applicable to line charts."
+          />
+          {showSeriesLimit && (
             <Box>
               <Controller
                 control={control}
@@ -298,8 +287,8 @@ export default function ChartDisplaySettingsDrawer({
                   <NumberInput
                     size="xs"
                     label="Series Limit"
-                    description="Maximum number of values displayed, keeping those with the largest values. Leave empty to fetch all."
-                    placeholder="Disabled (e.g. 10)"
+                    description="Maximum number of series fetched for a group-by chart. Leave empty to fetch every series."
+                    placeholder={`Disabled (e.g. ${DEFAULT_SERIES_LIMIT})`}
                     min={1}
                     allowDecimal={false}
                     value={value ?? ''}
@@ -310,106 +299,163 @@ export default function ChartDisplaySettingsDrawer({
                 )}
               />
             </Box>
-            <Divider />
-          </>
-        )}
+          )}
+          <Divider />
+        </>
+      )}
 
-        {showTableOptions && (
-          <>
-            {showGroupByColumnsOnLeft && (
-              <CheckBoxControlled
-                control={control}
-                name="groupByColumnsOnLeft"
-                size="xs"
-                label="Display Group By Columns on Left"
-              />
-            )}
+      {showCategoricalLimit && (
+        <>
+          <Box>
+            <Controller
+              control={control}
+              name="seriesLimit"
+              render={({ field: { onChange, value } }) => (
+                <NumberInput
+                  size="xs"
+                  label="Series Limit"
+                  description="Maximum number of values displayed, keeping those with the largest values. Leave empty to fetch all."
+                  placeholder="Disabled (e.g. 10)"
+                  min={1}
+                  allowDecimal={false}
+                  value={value ?? ''}
+                  onChange={v =>
+                    onChange(v === '' || v == null ? null : Number(v))
+                  }
+                />
+              )}
+            />
+          </Box>
+          <Divider />
+        </>
+      )}
+
+      {showTableOptions && (
+        <>
+          {showGroupByColumnsOnLeft && (
             <CheckBoxControlled
               control={control}
-              name="alternateRowBackground"
+              name="groupByColumnsOnLeft"
               size="xs"
-              label="Alternate Row Background"
+              label="Display Group By Columns on Left"
             />
-            <Divider />
-          </>
-        )}
+          )}
+          <CheckBoxControlled
+            control={control}
+            name="alternateRowBackground"
+            size="xs"
+            label="Alternate Row Background"
+          />
+          <Divider />
+        </>
+      )}
 
-        {showTileColor && (
-          <>
-            <Box>
-              <Text size="xs" c="dimmed" mb={4}>
-                Color
-              </Text>
-              <Controller
-                control={control}
-                name="color"
-                render={({ field: { onChange, value } }) => (
-                  <ColorSwatchInput
-                    value={value}
-                    onChange={onChange}
-                    ariaLabel="Number tile color"
-                  />
-                )}
-              />
-            </Box>
-            <Box>
-              <Controller
-                control={control}
-                name="colorRules"
-                render={({ field: { onChange, value } }) => (
-                  <ColorRulesEditor value={value ?? []} onChange={onChange} />
-                )}
-              />
-            </Box>
-            <Divider />
-          </>
-        )}
-
-        {showBackgroundChart && (
-          <>
+      {showTileColor && (
+        <>
+          <Box>
+            <Text size="xs" c="dimmed" mb={4}>
+              Color
+            </Text>
             <Controller
               control={control}
-              name="backgroundChart"
+              name="color"
               render={({ field: { onChange, value } }) => (
-                <BackgroundChartInput
+                <ColorSwatchInput
                   value={value}
                   onChange={onChange}
-                  disabled={isBackgroundChartDisabled}
+                  ariaLabel="Number tile color"
                 />
               )}
             />
-            <Divider />
-          </>
-        )}
+          </Box>
+          <Box>
+            <Controller
+              control={control}
+              name="colorRules"
+              render={({ field: { onChange, value } }) => (
+                <ColorRulesEditor value={value ?? []} onChange={onChange} />
+              )}
+            />
+          </Box>
+          <Divider />
+        </>
+      )}
+
+      {showBackgroundChart && (
+        <>
+          <Controller
+            control={control}
+            name="backgroundChart"
+            render={({ field: { onChange, value } }) => (
+              <BackgroundChartInput
+                value={value}
+                onChange={onChange}
+                disabled={isBackgroundChartDisabled}
+              />
+            )}
+          />
+          <Divider />
+        </>
+      )}
 
-        <NumberFormatForm
-          control={control}
-          setValue={setValue}
-          disclaimer={
-            isPerSeriesNumberFormatAllowed ? (
-              <Alert variant="outline" color="yellow" p="xs">
-                <Text size="xs" m={0}>
-                  Format may be overridden on individual series.
-                </Text>
-              </Alert>
-            ) : undefined
-          }
-        />
-        <Divider />
-        <Group gap="xs" mt="xs" justify="space-between">
-          <Button type="submit" variant="secondary" onClick={resetToDefaults}>
-            Reset to Defaults
-          </Button>
-          <Button
-            type="submit"
-            variant="primary"
-            onClick={applyChanges}
-            data-testid="display-settings-apply-button"
-          >
-            Apply
-          </Button>
-        </Group>
-      </Stack>
+      <NumberFormatForm
+        control={control}
+        setValue={setValue}
+        disclaimer={
+          isPerSeriesNumberFormatAllowed ? (
+            <Alert
+              variant="warning"
+              p="xs"
+              icon={<IconAlertTriangle size={16} />}
+            >
+              <Text size="xs" m={0}>
+                Format may be overridden on individual series.
+              </Text>
+            </Alert>
+          ) : undefined
+        }
+      />
+      <Divider />
+      <Group gap="xs" mt="xs" justify="space-between">
+        <Button type="submit" variant="secondary" onClick={resetToDefaults}>
+          Reset to Defaults
+        </Button>
+        <Button
+          type="submit"
+          variant="primary"
+          onClick={applyChanges}
+          data-testid="display-settings-apply-button"
+        >
+          Apply
+        </Button>
+      </Group>
+    </Stack>
+  );
+
+  // Panel mode: dock the settings as a full-height side panel beside the editor
+  // instead of stacking a second drawer, so the tile/preview stays visible
+  // while its display options are changed.
+  if (asPanel) {
+    if (!opened) return null;
+    return (
+      <SettingsSidePanel
+        title="Display Settings"
+        onClose={handleClose}
+        data-testid="display-settings-panel"
+      >
+        {content}
+      </SettingsSidePanel>
+    );
+  }
+
+  return (
+    <Drawer
+      title="Display Settings"
+      opened={opened}
+      onClose={handleClose}
+      position="right"
+    >
+      {content}
     </Drawer>
   );
 }
diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 625a61025a..de67a82d65 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -29,7 +29,11 @@ import {
   Text,
   Textarea,
 } from '@mantine/core';
-import { useDisclosure, usePrevious } from '@mantine/hooks';
+import {
+  useDisclosure,
+  useIsomorphicEffect,
+  usePrevious,
+} from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import {
   IconBracketsContain,
@@ -108,6 +112,11 @@ type EditTimeChartFormProps = {
   'data-testid'?: string;
   submitRef?: React.MutableRefObject<(() => void) | undefined>;
   isDashboardForm?: boolean;
+  /**
+   * Notifies the containing drawer whether a settings side panel is docked, so
+   * it can disable its own Esc-to-close and let the panel own Esc instead.
+   */
+  onSettingsPanelOpenChange?: (open: boolean) => void;
   autoRun?: boolean;
 };
 
@@ -146,6 +155,7 @@ export default function EditTimeChartForm({
   'data-testid': dataTestId,
   submitRef,
   isDashboardForm = false,
+  onSettingsPanelOpenChange,
   autoRun = false,
 }: EditTimeChartFormProps) {
   const formValue: ChartEditorFormState = useMemo(
@@ -346,6 +356,112 @@ export default function EditTimeChartForm({
     { open: openHeatmapSettings, close: closeHeatmapSettings },
   ] = useDisclosure(false);
 
+  // Need to force a rerender on change as the modal will not be mounted when initially rendered
+  const [parentRef, setParentRef] = useState<HTMLElement | null>(null);
+
+  // On a dashboard the editor lives inside a Drawer, so opening a settings
+  // view (regular Display Settings or the heatmap variant) docks a side panel
+  // next to the editor/preview instead of stacking a second drawer. On the
+  // Chart Explorer page the editor is not in a drawer, so they keep their own
+  // overlay drawer.
+  const showSettingsPanel =
+    isDashboardForm && (displaySettingsOpened || heatmapSettingsOpened);
+
+  // Tell the containing drawer to hand Esc over to the docked panel: while a
+  // panel is open the drawer disables its own Esc-to-close (see EditTileDrawer),
+  // so Esc closes just the panel and can never dismiss the whole tile editor.
+  //
+  // This MUST be a layout effect, not a passive effect. Mantine's Drawer reads
+  // `closeOnEscape` live via a window capture-phase keydown listener. If we
+  // notified the parent from a passive effect it would flip `closeOnEscape`
+  // only after the browser paints the just-opened panel, leaving a window in
+  // which Esc (pressed right after opening) still reaches Mantine as `true` and
+  // dismisses the entire tile editor. A layout effect flushes the parent state
+  // update synchronously before paint, so `closeOnEscape` is already `false`
+  // before the panel is ever visible to press Esc against.
+  useIsomorphicEffect(() => {
+    onSettingsPanelOpenChange?.(showSettingsPanel);
+    // Reset the parent's flag if the form unmounts while a panel is open (e.g.
+    // the drawer closes with settings still docked). Otherwise the drawer keeps
+    // `settingsPanelOpen === true` and its Esc-to-close stays disabled for the
+    // next tile it hosts.
+    return () => onSettingsPanelOpenChange?.(false);
+  }, [showSettingsPanel, onSettingsPanelOpenChange]);
+
+  // The panel owns Esc: while it's docked, Esc closes the panel. The drawer's
+  // own Esc is disabled above, so there's no double-close and no need to stop
+  // propagation. Bail out when Esc originated inside a nested overlay that
+  // consumes it: a popover dropdown, a select listbox, or an OPEN combobox (a
+  // Mantine Select keeps DOM focus on its input via aria-activedescendant, so
+  // match the input itself). The combobox arms are scoped to combobox-like
+  // roles — `[role="combobox"]` / `[aria-haspopup="listbox"]` with
+  // `aria-expanded="true"` — rather than a bare `[aria-expanded="true"]`: other
+  // expandable widgets (e.g. an `Accordion.Control` in the preview column) also
+  // carry `aria-expanded`, and matching those would swallow Esc and leave the
+  // panel stuck open with the UI reading as frozen. A closed combobox exposes
+  // `aria-expanded="false"` and correctly lets Esc fall through to close the
+  // panel. A focused CodeMirror editor is intentionally NOT exempt here — it
+  // calls preventDefault only when it actually consumes Esc (e.g. closing an
+  // open autocomplete), which the defaultPrevented guard above already covers;
+  // exempting it wholesale would swallow Esc and leave the panel open when no
+  // completion is showing.
+  // Attach as a layout effect (pre-paint) for the same reason as the notifier
+  // above: the panel must own Esc from the very first frame it is visible, so
+  // an Esc pressed immediately after opening closes the panel rather than
+  // doing nothing (or racing the drawer's own listener).
+  useIsomorphicEffect(() => {
+    if (!showSettingsPanel) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || e.defaultPrevented) return;
+      const target = e.target;
+      if (
+        target instanceof HTMLElement &&
+        target.closest(
+          '.mantine-Popover-dropdown, [role="listbox"], [role="combobox"][aria-expanded="true"], [aria-haspopup="listbox"][aria-expanded="true"]',
+        )
+      ) {
+        return;
+      }
+      // Mark the event handled so any later listener (e.g. the containing
+      // drawer's, should its `closeOnEscape` not yet have flipped) bails on
+      // the `defaultPrevented` guard instead of tearing down the editor.
+      e.preventDefault();
+      if (displaySettingsOpened) closeDisplaySettings();
+      if (heatmapSettingsOpened) closeHeatmapSettings();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    showSettingsPanel,
+    displaySettingsOpened,
+    heatmapSettingsOpened,
+    closeDisplaySettings,
+    closeHeatmapSettings,
+  ]);
+
+  // Whether the current tab has a regular Display Settings view. Search,
+  // Patterns and Markdown have none; Heatmap uses its own variant instead.
+  const displayTypeSupportsDisplaySettings =
+    displayType !== DisplayType.Search &&
+    displayType !== DisplayType.EventPatterns &&
+    displayType !== DisplayType.Markdown &&
+    displayType !== DisplayType.Heatmap;
+
+  // On tab change, close any settings panel that doesn't belong to the new tab
+  // so a stale panel (e.g. Number's Display Settings) is never shown on a tab
+  // without one, or the wrong variant (heatmap vs. regular) lingers.
+  useEffect(() => {
+    if (displayType === previousDisplayType) return;
+    if (!displayTypeSupportsDisplaySettings) closeDisplaySettings();
+    if (displayType !== DisplayType.Heatmap) closeHeatmapSettings();
+  }, [
+    displayType,
+    previousDisplayType,
+    displayTypeSupportsDisplaySettings,
+    closeDisplaySettings,
+    closeHeatmapSettings,
+  ]);
+
   // Only update this on submit, otherwise we'll have issues
   // with using the source value from the last submit
   // (ex. ignoring local custom source updates)
@@ -616,9 +732,6 @@ export default function EditTimeChartForm({
 
   const previousDateRange = getPreviousDateRange(dateRange);
 
-  // Need to force a rerender on change as the modal will not be mounted when initially rendered
-  const [parentRef, setParentRef] = useState<HTMLElement | null>(null);
-
   const handleUpdateDisplaySettings = useCallback(
     (
       {
@@ -709,8 +822,22 @@ export default function EditTimeChartForm({
   );
 
   return (
-    <div ref={setParentRef} data-testid={dataTestId}>
-      <ErrorBoundary>
+    <div
+      ref={setParentRef}
+      data-testid={dataTestId}
+      style={
+        isDashboardForm
+          ? { display: 'flex', flexDirection: 'column', height: '100%' }
+          : undefined
+      }
+    >
+      {/* Full-width display-type tab bar. Kept above the editor + Display
+          Settings row so the tabs never wrap when the panel is open. */}
+      <Box
+        px={isDashboardForm ? 'md' : undefined}
+        pt={isDashboardForm ? 'md' : undefined}
+        style={isDashboardForm ? { flexShrink: 0 } : undefined}
+      >
         <Controller
           control={control}
           name="displayType"
@@ -719,7 +846,6 @@ export default function EditTimeChartForm({
               value={value}
               onChange={onChange}
               radius={'xs'}
-              mb="md"
               data-testid="chart-type-input"
             >
               <Tabs.List>
@@ -781,166 +907,198 @@ export default function EditTimeChartForm({
             </Tabs>
           )}
         />
-        <Flex align="center" gap="sm" mb="sm">
-          <Text size="sm" className="text-nowrap">
-            Chart Name
-          </Text>
-          <InputControlled
-            name="name"
-            control={control}
-            flex={1}
-            type="text"
-            placeholder="My Chart Name"
-            data-testid="chart-name-input"
-          />
-          {isRawSqlDisplayType(displayType) && (
-            <Controller
-              control={control}
-              name="configType"
-              render={({ field: { onChange, value } }) => (
-                <SegmentedControl
-                  value={value ?? 'builder'}
-                  onChange={onChange}
-                  data={[
-                    { label: 'Builder', value: 'builder' },
-                    { label: 'SQL', value: 'sql' },
-                    ...(IS_PROMQL_ENABLED
-                      ? [{ label: 'PromQL', value: 'promql' }]
-                      : []),
-                  ]}
+      </Box>
+      {/* Editor + Display Settings side by side, below the tab bar, so the
+            tile/preview stays visible while its display options are changed.
+            In the dashboard drawer the row fills the remaining height: the
+            editor column scrolls on its own and the settings dock full-height
+            beside it. On Chart Explorer the settings return null and fall back
+            to the overlay Drawer. */}
+      <Flex
+        align="stretch"
+        gap={0}
+        style={isDashboardForm ? { flex: 1, minHeight: 0 } : undefined}
+      >
+        <Box
+          pt="md"
+          px={isDashboardForm ? 'md' : undefined}
+          pb={isDashboardForm ? 'md' : undefined}
+          style={{
+            flex: 1,
+            // Floor the editor column when a panel can dock beside it so a
+            // narrow drawer never crushes it; keep 0 on Chart Explorer so the
+            // sole column can shrink/overflow freely.
+            minWidth: isDashboardForm ? 320 : 0,
+            ...(isDashboardForm
+              ? { height: '100%', overflowY: 'auto' as const }
+              : {}),
+          }}
+        >
+          <ErrorBoundary>
+            <Flex align="center" gap="sm" mb="sm">
+              <Text size="sm" className="text-nowrap">
+                Chart Name
+              </Text>
+              <InputControlled
+                name="name"
+                control={control}
+                flex={1}
+                type="text"
+                placeholder="My Chart Name"
+                data-testid="chart-name-input"
+              />
+              {isRawSqlDisplayType(displayType) && (
+                <Controller
+                  control={control}
+                  name="configType"
+                  render={({ field: { onChange, value } }) => (
+                    <SegmentedControl
+                      value={value ?? 'builder'}
+                      onChange={onChange}
+                      data={[
+                        { label: 'Builder', value: 'builder' },
+                        { label: 'SQL', value: 'sql' },
+                        ...(IS_PROMQL_ENABLED
+                          ? [{ label: 'PromQL', value: 'promql' }]
+                          : []),
+                      ]}
+                    />
+                  )}
                 />
               )}
-            />
-          )}
-        </Flex>
-        <Divider my="md" />
-        {activeTab === 'markdown' ? (
-          <div>
-            <Textarea
-              {...register('markdown')}
-              label="Markdown content"
-              placeholder="Markdown"
-              mb="md"
-              styles={{
-                input: {
-                  minHeight: 200,
-                },
-              }}
-            />
-            <Box p="md" mb="md">
-              <HDXMarkdownChart
-                config={{
-                  markdown: markdown || 'Preview',
-                }}
+            </Flex>
+            <Divider my="md" />
+            {activeTab === 'markdown' ? (
+              <div>
+                <Textarea
+                  {...register('markdown')}
+                  label="Markdown content"
+                  placeholder="Markdown"
+                  mb="md"
+                  styles={{
+                    input: {
+                      minHeight: 200,
+                    },
+                  }}
+                />
+                <Box p="md" mb="md">
+                  <HDXMarkdownChart
+                    config={{
+                      markdown: markdown || 'Preview',
+                    }}
+                  />
+                </Box>
+              </div>
+            ) : isPromqlInput ? (
+              <PromqlChartEditor
+                control={control}
+                onSubmit={onSubmit}
+                onOpenDisplaySettings={openDisplaySettings}
               />
-            </Box>
-          </div>
-        ) : isPromqlInput ? (
-          <PromqlChartEditor
-            control={control}
-            onSubmit={onSubmit}
-            onOpenDisplaySettings={openDisplaySettings}
-          />
-        ) : isRawSqlInput ? (
-          <RawSqlChartEditor
-            control={control}
-            setValue={setValue}
-            onOpenDisplaySettings={openDisplaySettings}
-            onSubmit={onSubmit}
-            isDashboardForm={isDashboardForm}
-            alert={alert}
-            dashboardId={dashboardId}
-          />
-        ) : (
-          <ChartEditorControls
-            control={control}
-            setValue={setValue}
-            clearErrors={clearErrors}
-            errors={errors}
-            fields={fields}
-            append={append}
-            removeSeries={removeSeries}
-            swapSeries={swapSeries}
-            duplicateSeries={duplicateSeries}
+            ) : isRawSqlInput ? (
+              <RawSqlChartEditor
+                control={control}
+                setValue={setValue}
+                onOpenDisplaySettings={openDisplaySettings}
+                onSubmit={onSubmit}
+                isDashboardForm={isDashboardForm}
+                alert={alert}
+                dashboardId={dashboardId}
+              />
+            ) : (
+              <ChartEditorControls
+                control={control}
+                setValue={setValue}
+                clearErrors={clearErrors}
+                errors={errors}
+                fields={fields}
+                append={append}
+                removeSeries={removeSeries}
+                swapSeries={swapSeries}
+                duplicateSeries={duplicateSeries}
+                tableSource={tableSource}
+                tableConnection={tableConnection}
+                databaseName={databaseName}
+                tableName={tableName}
+                dateRange={dateRange}
+                select={select}
+                displayType={displayType}
+                activeTab={activeTab}
+                seriesReturnType={seriesReturnType}
+                ratioMode={ratioMode}
+                alert={alert}
+                isRawSqlInput={isRawSqlInput}
+                dashboardId={dashboardId}
+                parentRef={parentRef}
+                chartConfigForExplanations={chartConfigForExplanations}
+                onSubmit={onSubmit}
+                openDisplaySettings={openDisplaySettings}
+                openHeatmapSettings={openHeatmapSettings}
+              />
+            )}
+            <ChartActionBar
+              control={control}
+              handleSubmit={handleSubmit}
+              tableConnection={tableConnection}
+              activeTab={activeTab}
+              isRawSqlInput={isRawSqlInput}
+              dashboardId={dashboardId}
+              parentRef={parentRef}
+              groupBy={groupBy}
+              onSubmit={onSubmit}
+              handleSave={handleSave}
+              onSave={onSave}
+              onClose={onClose}
+              isSaving={isSaving}
+              displayedTimeInputValue={displayedTimeInputValue}
+              setDisplayedTimeInputValue={setDisplayedTimeInputValue}
+              onTimeRangeSearch={onTimeRangeSearch}
+              setSaveToDashboardModalOpen={setSaveToDashboardModalOpen}
+            />
+          </ErrorBoundary>
+          <ChartPreviewPanel
+            queriedConfig={queriedConfig}
             tableSource={tableSource}
-            tableConnection={tableConnection}
-            databaseName={databaseName}
-            tableName={tableName}
             dateRange={dateRange}
-            select={select}
-            displayType={displayType}
             activeTab={activeTab}
-            seriesReturnType={seriesReturnType}
-            ratioMode={ratioMode}
             alert={alert}
-            isRawSqlInput={isRawSqlInput}
-            dashboardId={dashboardId}
-            parentRef={parentRef}
+            sourceId={sourceId}
+            onTimeRangeSelect={onTimeRangeSelect}
             chartConfigForExplanations={chartConfigForExplanations}
+            showGeneratedSql={showGeneratedSql}
+            showSampleEvents={showSampleEvents}
+            dbTimeChartConfig={dbTimeChartConfig}
+            setValue={(name, value) => setValue(name, value)}
             onSubmit={onSubmit}
-            openDisplaySettings={openDisplaySettings}
-            openHeatmapSettings={openHeatmapSettings}
           />
-        )}
-        <ChartActionBar
-          control={control}
-          handleSubmit={handleSubmit}
-          tableConnection={tableConnection}
-          activeTab={activeTab}
-          isRawSqlInput={isRawSqlInput}
-          dashboardId={dashboardId}
+        </Box>
+        <ChartDisplaySettingsDrawer
+          asPanel={isDashboardForm}
+          opened={displaySettingsOpened}
+          settings={displaySettings}
+          defaultNumberFormat={autoDetectedNumberFormat}
+          previousDateRange={!dashboardId ? previousDateRange : undefined}
+          displayType={displayType}
+          configType={configType}
+          onChange={handleUpdateDisplaySettings}
+          onClose={closeDisplaySettings}
+          isPerSeriesNumberFormatAllowed={configType !== 'sql'}
+        />
+        <HeatmapSettingsDrawer
+          asPanel={isDashboardForm}
+          opened={heatmapSettingsOpened}
+          onClose={closeHeatmapSettings}
+          connection={tableConnection}
           parentRef={parentRef}
-          groupBy={groupBy}
-          onSubmit={onSubmit}
-          handleSave={handleSave}
-          onSave={onSave}
-          onClose={onClose}
-          isSaving={isSaving}
-          displayedTimeInputValue={displayedTimeInputValue}
-          setDisplayedTimeInputValue={setDisplayedTimeInputValue}
-          onTimeRangeSearch={onTimeRangeSearch}
-          setSaveToDashboardModalOpen={setSaveToDashboardModalOpen}
+          defaultValues={heatmapSettingsDefaults}
+          onSubmit={handleUpdateHeatmapSettings}
         />
-      </ErrorBoundary>
-      <ChartPreviewPanel
-        queriedConfig={queriedConfig}
-        tableSource={tableSource}
-        dateRange={dateRange}
-        activeTab={activeTab}
-        alert={alert}
-        sourceId={sourceId}
-        onTimeRangeSelect={onTimeRangeSelect}
-        chartConfigForExplanations={chartConfigForExplanations}
-        showGeneratedSql={showGeneratedSql}
-        showSampleEvents={showSampleEvents}
-        dbTimeChartConfig={dbTimeChartConfig}
-        setValue={(name, value) => setValue(name, value)}
-        onSubmit={onSubmit}
-      />
+      </Flex>
       <SaveToDashboardModal
         chartConfig={chartConfig}
         opened={saveToDashboardModalOpen}
         onClose={() => setSaveToDashboardModalOpen(false)}
       />
-      <ChartDisplaySettingsDrawer
-        opened={displaySettingsOpened}
-        settings={displaySettings}
-        defaultNumberFormat={autoDetectedNumberFormat}
-        previousDateRange={!dashboardId ? previousDateRange : undefined}
-        displayType={displayType}
-        configType={configType}
-        onChange={handleUpdateDisplaySettings}
-        onClose={closeDisplaySettings}
-        isPerSeriesNumberFormatAllowed={configType !== 'sql'}
-      />
-      <HeatmapSettingsDrawer
-        opened={heatmapSettingsOpened}
-        onClose={closeHeatmapSettings}
-        connection={tableConnection}
-        parentRef={parentRef}
-        defaultValues={heatmapSettingsDefaults}
-        onSubmit={handleUpdateHeatmapSettings}
-      />
     </div>
   );
 }
diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
index 7796fdee80..734000ee80 100644
--- a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
@@ -5,6 +5,7 @@ import {
   SavedChartConfig,
   SourceKind,
 } from '@hyperdx/common-utils/dist/types';
+import { Drawer } from '@mantine/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -141,6 +142,10 @@ jest.mock('@/HDXMarkdownChart', () => ({
   default: () => <div>Markdown Chart</div>,
 }));
 
+// The docked Display Settings panel renders a Mantine Select (number format);
+// its Combobox calls scrollIntoView when opened, which jsdom lacks.
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -620,3 +625,202 @@ describe('DBEditTimeChartForm - Column color', () => {
     expect(screen.getByTestId('series-color-apply')).toBeInTheDocument();
   });
 });
+
+// The dashboard tile editor lives inside a Drawer and docks Display Settings as
+// a side panel. Esc must close only that panel (never the whole editor). This
+// behavior has regressed repeatedly and was previously untested at the unit
+// level (no test rendered with isDashboardForm).
+describe('DBEditTimeChartForm - Docked settings panel Esc contract', () => {
+  const renderDashboardForm = (
+    props: Partial<React.ComponentProps<typeof DBEditTimeChartForm>> = {},
+  ) =>
+    renderComponent({
+      chartConfig: { ...defaultChartConfig, displayType: DisplayType.Line },
+      dashboardId: 'test-dashboard-id',
+      isDashboardForm: true,
+      ...props,
+    });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('docks the Display Settings panel and notifies the drawer when opened', async () => {
+    const onSettingsPanelOpenChange = jest.fn();
+    renderDashboardForm({ onSettingsPanelOpenChange });
+
+    await userEvent.click(screen.getByTestId('display-settings-button'));
+
+    expect(
+      await screen.findByTestId('display-settings-panel'),
+    ).toBeInTheDocument();
+    // The containing drawer relies on this notification to disable its own
+    // Esc-to-close before the panel is ever visible (guards the capture-phase
+    // race that would otherwise dismiss the entire editor).
+    expect(onSettingsPanelOpenChange).toHaveBeenLastCalledWith(true);
+  });
+
+  it('closes only the panel on Escape, leaving the editor mounted', async () => {
+    const onSettingsPanelOpenChange = jest.fn();
+    const onClose = jest.fn();
+    renderDashboardForm({ onSettingsPanelOpenChange, onClose });
+
+    await userEvent.click(screen.getByTestId('display-settings-button'));
+    expect(
+      await screen.findByTestId('display-settings-panel'),
+    ).toBeInTheDocument();
+
+    fireEvent.keyDown(document.body, { key: 'Escape' });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('display-settings-panel'),
+      ).not.toBeInTheDocument();
+    });
+    // The editor form is still there and was never asked to close.
+    expect(screen.getByTestId('chart-name-input')).toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
+    expect(onSettingsPanelOpenChange).toHaveBeenLastCalledWith(false);
+  });
+
+  // A Mantine Select renders role="combobox" on its input (see the sibling
+  // ChartDisplaySettingsDrawer suite) and flips aria-expanded to "true" while
+  // its dropdown is open. Esc from such an open combobox must be consumed by the
+  // dropdown, not close the panel. Assert against both combobox-like shapes the
+  // handler keys on, since Mantine's open state does not flip synchronously
+  // under jsdom (so driving the real Select's attribute here is unreliable).
+  it.each([
+    { role: 'combobox', 'aria-expanded': 'true' },
+    { 'aria-haspopup': 'listbox', 'aria-expanded': 'true' },
+  ])('keeps the panel open on Escape from an open %o', async attrs => {
+    renderDashboardForm();
+
+    await userEvent.click(screen.getByTestId('display-settings-button'));
+    expect(
+      await screen.findByTestId('display-settings-panel'),
+    ).toBeInTheDocument();
+
+    const openCombobox = document.createElement('div');
+    Object.entries(attrs).forEach(([k, v]) => openCombobox.setAttribute(k, v));
+    document.body.appendChild(openCombobox);
+    fireEvent.keyDown(openCombobox, { key: 'Escape' });
+
+    expect(screen.getByTestId('display-settings-panel')).toBeInTheDocument();
+    openCombobox.remove();
+  });
+
+  it('closes the panel on Escape from a non-combobox expanded control', async () => {
+    renderDashboardForm();
+
+    await userEvent.click(screen.getByTestId('display-settings-button'));
+    expect(
+      await screen.findByTestId('display-settings-panel'),
+    ).toBeInTheDocument();
+
+    // A focusable disclosure such as an Accordion.Control carries
+    // aria-expanded but is not a combobox; the narrowed exemption must let Esc
+    // through so the panel closes instead of the UI reading as frozen.
+    const accordionControl = document.createElement('button');
+    accordionControl.setAttribute('aria-expanded', 'true');
+    document.body.appendChild(accordionControl);
+    fireEvent.keyDown(accordionControl, { key: 'Escape' });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('display-settings-panel'),
+      ).not.toBeInTheDocument();
+    });
+    accordionControl.remove();
+  });
+});
+
+// The unit tests above render the form bare. This suite wraps it in a real
+// Mantine Drawer wired exactly like EditTileDrawer (closeOnEscape driven by the
+// panel-open notification), which is the only place the capture/bubble ordering
+// between the drawer's Esc handling and the panel's Esc handling actually
+// matters.
+describe('DBEditTimeChartForm - Docked panel Esc inside a real Drawer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const EditTileDrawerHarness = ({
+    onDrawerClose,
+  }: {
+    onDrawerClose: () => void;
+  }) => {
+    const [settingsPanelOpen, setSettingsPanelOpen] = React.useState(false);
+    return (
+      <Drawer
+        opened
+        onClose={onDrawerClose}
+        closeOnEscape={!settingsPanelOpen}
+        withCloseButton={false}
+      >
+        <div data-testid="drawer-content-marker" />
+        <QueryClientProvider client={queryClient}>
+          <DBEditTimeChartForm
+            chartConfig={{
+              ...defaultChartConfig,
+              displayType: DisplayType.Line,
+            }}
+            dateRange={[new Date('2024-01-01'), new Date('2024-01-02')]}
+            dashboardId="test-dashboard-id"
+            isDashboardForm
+            onSettingsPanelOpenChange={setSettingsPanelOpen}
+          />
+        </QueryClientProvider>
+      </Drawer>
+    );
+  };
+
+  it('closes only the docked panel on Escape, keeping the drawer open', async () => {
+    const onDrawerClose = jest.fn();
+    renderWithMantine(<EditTileDrawerHarness onDrawerClose={onDrawerClose} />);
+
+    await userEvent.click(screen.getByTestId('display-settings-button'));
+    const panel = await screen.findByTestId('display-settings-panel');
+    expect(panel).toBeInTheDocument();
+
+    // Dispatch Escape the way a real keypress does: on the focused element,
+    // through the full event system, so it hits both the drawer's own window
+    // keydown listener (Mantine closes the drawer on Esc via useWindowEvent)
+    // and the window listener the panel installs.
+    await userEvent.keyboard('{Escape}');
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('display-settings-panel'),
+      ).not.toBeInTheDocument();
+    });
+    // The drawer must survive: only the panel closed.
+    expect(screen.getByTestId('drawer-content-marker')).toBeInTheDocument();
+    expect(onDrawerClose).not.toHaveBeenCalled();
+  });
+
+  it('closes the panel on the first Escape and the drawer on the second', async () => {
+    const onDrawerClose = jest.fn();
+    renderWithMantine(<EditTileDrawerHarness onDrawerClose={onDrawerClose} />);
+
+    await userEvent.click(screen.getByTestId('display-settings-button'));
+    expect(
+      await screen.findByTestId('display-settings-panel'),
+    ).toBeInTheDocument();
+
+    // First Escape: closes the panel, drawer stays open.
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('display-settings-panel'),
+      ).not.toBeInTheDocument();
+    });
+    expect(onDrawerClose).not.toHaveBeenCalled();
+
+    // Second Escape: now that the panel is gone the drawer re-owns Esc and
+    // closes. This is the two-step contract the user expects.
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => {
+      expect(onDrawerClose).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/packages/app/src/components/HeatmapSettingsDrawer.tsx b/packages/app/src/components/HeatmapSettingsDrawer.tsx
index bc0d0a87d6..b7eda78040 100644
--- a/packages/app/src/components/HeatmapSettingsDrawer.tsx
+++ b/packages/app/src/components/HeatmapSettingsDrawer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -17,6 +17,8 @@ import { IconPlayerPlay } from '@tabler/icons-react';
 
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
 
+import SettingsSidePanel from './SettingsSidePanel';
+
 const HeatmapSettingsSchema = z.object({
   value: z.string().trim().min(1),
   count: z.string().trim().optional(),
@@ -32,6 +34,7 @@ export default function HeatmapSettingsDrawer({
   parentRef,
   defaultValues,
   onSubmit,
+  asPanel = false,
 }: {
   opened: boolean;
   onClose: () => void;
@@ -39,16 +42,35 @@ export default function HeatmapSettingsDrawer({
   parentRef?: HTMLElement | null;
   defaultValues: HeatmapSettingsValues;
   onSubmit: (v: HeatmapSettingsValues) => void;
+  /**
+   * Render as an in-place full-height side panel (used inside the tile editor
+   * drawer) instead of a nested Drawer overlay. Defaults to the Drawer so other
+   * callers (e.g. the Search page heatmap) are unaffected.
+   */
+  asPanel?: boolean;
 }) {
   const form = useForm({
     resolver: zodResolver(HeatmapSettingsSchema),
     defaultValues,
   });
 
+  // Reset only on the closed→open transition so every dismiss path — Apply,
+  // Cancel, Esc, or a tab change that closes the panel via the bare disclosure —
+  // behaves like cancel: abandoned edits never linger in the sub-form to be
+  // written by the next Apply. This is edge-triggered on `opened` (via a ref)
+  // rather than level-triggered on `defaultValues`: `defaultValues` is a
+  // useMemo over watched value/count/scale in the parent, so a level-triggered
+  // reset would re-run whenever the source (or any watched field) changes while
+  // the panel is open, silently discarding unapplied panel edits. Kept in
+  // lockstep with ChartDisplaySettingsDrawer's edge-triggered reset.
+  const wasOpenedRef = useRef(false);
   useEffect(() => {
-    form.reset(defaultValues);
+    if (opened && !wasOpenedRef.current) {
+      form.reset(defaultValues);
+    }
+    wasOpenedRef.current = opened;
     // eslint-disable-next-line react-hooks/exhaustive-deps -- form object is stable from useForm
-  }, [defaultValues]);
+  }, [opened, defaultValues]);
 
   const handleClose = useCallback(() => {
     form.reset(defaultValues);
@@ -57,6 +79,91 @@ export default function HeatmapSettingsDrawer({
 
   const scaleType = useWatch({ control: form.control, name: 'scaleType' });
 
+  const content = (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <Stack gap="md">
+        <Box>
+          <Text size="sm" fw={500} mb={4}>
+            Scale
+          </Text>
+          <SegmentedControl
+            size="xs"
+            value={scaleType}
+            onChange={v => {
+              if (v === 'log' || v === 'linear') {
+                form.setValue('scaleType', v);
+              }
+            }}
+            data={[
+              { label: 'Log', value: 'log' },
+              { label: 'Linear', value: 'linear' },
+            ]}
+          />
+        </Box>
+
+        <Divider />
+
+        <SQLInlineEditorControlled
+          parentRef={parentRef}
+          tableConnection={connection}
+          control={form.control}
+          name="value"
+          size="xs"
+          tooltipText="Controls the Y axis range and scale — defines the metric plotted vertically."
+          placeholder="SQL expression"
+          language="sql"
+          onSubmit={form.handleSubmit(onSubmit)}
+          label="Value"
+          error={form.formState.errors.value?.message}
+          rules={{ required: true }}
+        />
+
+        <SQLInlineEditorControlled
+          parentRef={parentRef}
+          tableConnection={connection}
+          control={form.control}
+          name="count"
+          placeholder="SQL expression"
+          language="sql"
+          size="xs"
+          tooltipText="Controls the color intensity (Z axis) — shows how frequently or strongly each value occurs."
+          onSubmit={form.handleSubmit(onSubmit)}
+          label="Count"
+          error={form.formState.errors.count?.message}
+        />
+
+        <Divider />
+        <Group gap="xs" justify="flex-end">
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            type="submit"
+            leftSection={<IconPlayerPlay size={16} />}
+          >
+            Apply
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+
+  // Panel mode: dock as a full-height side panel beside the editor (used inside
+  // the tile editor drawer) instead of stacking a second drawer.
+  if (asPanel) {
+    if (!opened) return null;
+    return (
+      <SettingsSidePanel
+        title="Display Settings"
+        onClose={handleClose}
+        data-testid="heatmap-settings-panel"
+      >
+        {content}
+      </SettingsSidePanel>
+    );
+  }
+
   return (
     <Drawer
       title="Display Settings"
@@ -66,73 +173,7 @@ export default function HeatmapSettingsDrawer({
       size="sm"
       lockScroll={false}
     >
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <Stack gap="md">
-          <Box>
-            <Text size="sm" fw={500} mb={4}>
-              Scale
-            </Text>
-            <SegmentedControl
-              size="xs"
-              value={scaleType}
-              onChange={v => {
-                if (v === 'log' || v === 'linear') {
-                  form.setValue('scaleType', v);
-                }
-              }}
-              data={[
-                { label: 'Log', value: 'log' },
-                { label: 'Linear', value: 'linear' },
-              ]}
-            />
-          </Box>
-
-          <Divider />
-
-          <SQLInlineEditorControlled
-            parentRef={parentRef}
-            tableConnection={connection}
-            control={form.control}
-            name="value"
-            size="xs"
-            tooltipText="Controls the Y axis range and scale — defines the metric plotted vertically."
-            placeholder="SQL expression"
-            language="sql"
-            onSubmit={form.handleSubmit(onSubmit)}
-            label="Value"
-            error={form.formState.errors.value?.message}
-            rules={{ required: true }}
-          />
-
-          <SQLInlineEditorControlled
-            parentRef={parentRef}
-            tableConnection={connection}
-            control={form.control}
-            name="count"
-            placeholder="SQL expression"
-            language="sql"
-            size="xs"
-            tooltipText="Controls the color intensity (Z axis) — shows how frequently or strongly each value occurs."
-            onSubmit={form.handleSubmit(onSubmit)}
-            label="Count"
-            error={form.formState.errors.count?.message}
-          />
-
-          <Divider />
-          <Group gap="xs" justify="flex-end">
-            <Button variant="secondary" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button
-              variant="primary"
-              type="submit"
-              leftSection={<IconPlayerPlay size={16} />}
-            >
-              Apply
-            </Button>
-          </Group>
-        </Stack>
-      </form>
+      {content}
     </Drawer>
   );
 }
diff --git a/packages/app/src/components/NumberFormat.tsx b/packages/app/src/components/NumberFormat.tsx
index 16d658c2ee..4b50b08322 100644
--- a/packages/app/src/components/NumberFormat.tsx
+++ b/packages/app/src/components/NumberFormat.tsx
@@ -9,8 +9,8 @@ import {
 import { NumberFormat, NumericUnit } from '@hyperdx/common-utils/dist/types';
 import {
   Checkbox as MCheckbox,
-  NativeSelect,
   Paper,
+  Select,
   Slider,
   Stack,
   TextInput,
@@ -184,15 +184,17 @@ export const NumberFormatForm: React.FC<{
             key="numberFormat.output"
             name="numberFormat.output"
             render={({ field: { onChange, ...field } }) => (
-              <NativeSelect
+              <Select
                 {...field}
                 label="Output format"
                 leftSection={format.output && FORMAT_ICONS[format.output]}
                 style={{ flex: 1 }}
                 data={OUTPUT_CATEGORY_OPTIONS}
-                onChange={e => {
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-                  const newOutput = e.target.value as NumberFormat['output'];
+                value={field.value ?? null}
+                allowDeselect={false}
+                onChange={value => {
+                  if (!value) return;
+                  const newOutput = value as NumberFormat['output'];
                   onChange(newOutput);
                   setValue(
                     'numberFormat.numericUnit',
@@ -220,13 +222,16 @@ export const NumberFormatForm: React.FC<{
             key="numberFormat.numericUnit"
             name="numberFormat.numericUnit"
             render={({ field: { value, onChange, ...field } }) => (
-              <NativeSelect
+              <Select
                 {...field}
                 label="Unit"
                 value={
-                  value ?? DEFAULT_NUMERIC_UNIT_BY_OUTPUT[format.output ?? '']
+                  value ??
+                  DEFAULT_NUMERIC_UNIT_BY_OUTPUT[format.output ?? ''] ??
+                  null
                 }
-                onChange={e => onChange(e.target.value)}
+                allowDeselect={false}
+                onChange={val => val && onChange(val)}
                 data={unitOptions}
               />
             )}
@@ -315,12 +320,13 @@ export const NumberFormatForm: React.FC<{
                     ?.value ?? '1';
 
                 return (
-                  <NativeSelect
+                  <Select
                     {...field}
                     size="sm"
                     label="Input unit"
                     value={stringValue}
-                    onChange={e => onChange(parseFloat(e.target.value))}
+                    allowDeselect={false}
+                    onChange={val => onChange(parseFloat(val ?? '1'))}
                     data={options}
                   />
                 );
diff --git a/packages/app/src/components/SettingsSidePanel.tsx b/packages/app/src/components/SettingsSidePanel.tsx
new file mode 100644
index 0000000000..3c18453bf2
--- /dev/null
+++ b/packages/app/src/components/SettingsSidePanel.tsx
@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+import {
+  ActionIcon,
+  Box,
+  Group,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+import { useId } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
+
+/**
+ * Shared chrome for a docked, full-height settings side panel used inside the
+ * tile editor drawer (in place of a nested Drawer). A pinned header with a
+ * close button sits on top; only the body scrolls (vertical only). The
+ * `border-left` runs the full height so it meets the editor's header underline.
+ */
+export default function SettingsSidePanel({
+  title,
+  onClose,
+  children,
+  'data-testid': dataTestId,
+}: {
+  title: string;
+  onClose: () => void;
+  children: ReactNode;
+  'data-testid'?: string;
+}) {
+  // The docked panel replaces a Mantine Drawer, which exposed role="dialog"
+  // with an accessible name. Preserve an accessible landmark: a labelled
+  // region whose name comes from the heading title.
+  const titleId = useId();
+  return (
+    <Box
+      data-testid={dataTestId}
+      role="region"
+      aria-labelledby={titleId}
+      style={{
+        flexShrink: 0,
+        // Cap at 340px but yield to the editor column on narrow viewports (the
+        // panel lives inside a 90% drawer), so the editor is never crushed.
+        width: 'min(340px, 45%)',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        borderLeft: '1px solid var(--color-border)',
+      }}
+    >
+      <Group
+        justify="space-between"
+        wrap="nowrap"
+        px="md"
+        py="sm"
+        style={{ borderBottom: '1px solid var(--color-border)' }}
+      >
+        <Text id={titleId} component="h2" size="sm" fw={600} m={0}>
+          {title}
+        </Text>
+        <Tooltip label="Close" position="bottom">
+          <ActionIcon
+            variant="subtle"
+            size="sm"
+            onClick={onClose}
+            aria-label={`Close ${title}`}
+            data-testid="settings-panel-close-button"
+          >
+            <IconX size={16} />
+          </ActionIcon>
+        </Tooltip>
+      </Group>
+      <ScrollArea
+        scrollbars="y"
+        style={{ flex: 1, minHeight: 0 }}
+        px="md"
+        py="md"
+      >
+        {children}
+      </ScrollArea>
+    </Box>
+  );
+}
diff --git a/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx b/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
index e07419a2b5..52d9cdea96 100644
--- a/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
+++ b/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
@@ -7,6 +7,10 @@ import ChartDisplaySettingsDrawer, {
   ChartConfigDisplaySettings,
 } from '@/components/ChartDisplaySettingsDrawer';
 
+// Mantine's Combobox (used by the number format Select) calls scrollIntoView
+// when its dropdown opens; jsdom lacks it.
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
 // FormatTime depends on useUserPreferences (jotai + localStorage); mock it
 // so the drawer renders in isolation.
 jest.mock('@/useFormatTime', () => ({
@@ -521,9 +525,11 @@ describe('ChartDisplaySettingsDrawer', () => {
         />,
       );
 
-      await user.selectOptions(
+      await user.click(
         screen.getByRole('combobox', { name: /output format/i }),
-        'number',
+      );
+      await user.click(
+        await screen.findByRole('option', { name: 'Number', hidden: true }),
       );
       await user.click(screen.getByRole('button', { name: /apply/i }));
 
@@ -563,4 +569,59 @@ describe('ChartDisplaySettingsDrawer', () => {
       });
     });
   });
+
+  // The dashboard tile editor renders this component as a docked side panel
+  // (asPanel) instead of an overlay Drawer. That fork was previously untested.
+  describe('asPanel (docked side panel) mode', () => {
+    it('renders the docked panel, not an overlay dialog, when opened', () => {
+      renderWithMantine(
+        <ChartDisplaySettingsDrawer
+          {...baseProps}
+          displayType={DisplayType.Line}
+          asPanel
+        />,
+      );
+
+      expect(screen.getByTestId('display-settings-panel')).toBeInTheDocument();
+      // The panel is a plain Box, so it must not expose the Drawer's dialog role.
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      // ...but it must still be a labelled landmark for assistive tech.
+      expect(
+        screen.getByRole('region', { name: 'Display Settings' }),
+      ).toBeInTheDocument();
+    });
+
+    it('renders nothing when asPanel and not opened', () => {
+      renderWithMantine(
+        <ChartDisplaySettingsDrawer
+          {...baseProps}
+          opened={false}
+          displayType={DisplayType.Line}
+          asPanel
+        />,
+      );
+
+      expect(
+        screen.queryByTestId('display-settings-panel'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('invokes onClose when the panel close button is clicked', async () => {
+      const onClose = jest.fn();
+      const user = userEvent.setup();
+
+      renderWithMantine(
+        <ChartDisplaySettingsDrawer
+          {...baseProps}
+          displayType={DisplayType.Line}
+          onClose={onClose}
+          asPanel
+        />,
+      );
+
+      await user.click(screen.getByTestId('settings-panel-close-button'));
+
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/packages/app/src/hooks/__tests__/useDashboardKioskMode.test.tsx b/packages/app/src/hooks/__tests__/useDashboardKioskMode.test.tsx
index 530c859712..f9a89fde62 100644
--- a/packages/app/src/hooks/__tests__/useDashboardKioskMode.test.tsx
+++ b/packages/app/src/hooks/__tests__/useDashboardKioskMode.test.tsx
@@ -1,13 +1,14 @@
 import { act, renderHook } from '@testing-library/react';
 
 const mockSetKioskMode = jest.fn();
+let mockIsKiosk = false;
 
 jest.mock('nuqs', () => {
   const actual = jest.requireActual('nuqs');
   return {
     ...actual,
     // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
-    useQueryState: () => [false, mockSetKioskMode],
+    useQueryState: () => [mockIsKiosk, mockSetKioskMode],
   };
 });
 
@@ -19,8 +20,16 @@ jest.mock('@mantine/hooks', () => {
   };
 });
 
+import { useHotkeys } from '@mantine/hooks';
+
 import { useDashboardKioskMode } from '@/hooks/useDashboardKioskMode';
 
+function getEscapeHotkey() {
+  const lastCall = jest.mocked(useHotkeys).mock.calls.at(-1);
+  const items = lastCall?.[0] ?? [];
+  return items.find(([key]) => key === 'Escape');
+}
+
 describe('useDashboardKioskMode', () => {
   let fullscreenElement: Element | null;
   let requestFullscreen: jest.Mock<Promise<void>, []>;
@@ -31,6 +40,8 @@ describe('useDashboardKioskMode', () => {
     requestFullscreen = jest.fn().mockResolvedValue(undefined);
     exitFullscreen = jest.fn().mockResolvedValue(undefined);
     mockSetKioskMode.mockReset();
+    mockIsKiosk = false;
+    jest.mocked(useHotkeys).mockClear();
 
     Object.defineProperty(document, 'fullscreenElement', {
       configurable: true,
@@ -71,4 +82,33 @@ describe('useDashboardKioskMode', () => {
 
     expect(mockSetKioskMode).not.toHaveBeenCalled();
   });
+
+  // Regression: the Escape hotkey used to be registered as
+  // `['Escape', exitKioskMode]`, which (a) fired regardless of kiosk state and
+  // (b) preventDefaulted by default. Because Mantine's useHotkeys listens on
+  // documentElement and bubbles before window-level Esc handlers, that marked
+  // every Escape as handled and left the tile editor's docked settings panel —
+  // which bails on `event.defaultPrevented` — unable to close on Esc.
+  it('registers Escape without preventDefault so it never swallows the key', () => {
+    renderHook(() => useDashboardKioskMode());
+    const escape = getEscapeHotkey();
+    expect(escape).toBeDefined();
+    expect(escape?.[2]).toEqual({ preventDefault: false });
+  });
+
+  it('ignores Escape when not in kiosk mode', () => {
+    mockIsKiosk = false;
+    renderHook(() => useDashboardKioskMode());
+    const escape = getEscapeHotkey();
+    act(() => escape?.[1](new KeyboardEvent('keydown', { key: 'Escape' })));
+    expect(mockSetKioskMode).not.toHaveBeenCalled();
+  });
+
+  it('exits kiosk mode on Escape when active', () => {
+    mockIsKiosk = true;
+    renderHook(() => useDashboardKioskMode());
+    const escape = getEscapeHotkey();
+    act(() => escape?.[1](new KeyboardEvent('keydown', { key: 'Escape' })));
+    expect(mockSetKioskMode).toHaveBeenCalledWith(null);
+  });
 });
diff --git a/packages/app/src/hooks/__tests__/useTileSelection.test.tsx b/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
index d02159201f..0d3ab10311 100644
--- a/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
+++ b/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
@@ -143,3 +143,39 @@ describe('useTileSelection — handleGroupSelected', () => {
     expect(result.containers!.some(c => c.id === 'c-empty')).toBe(true);
   });
 });
+
+describe('useTileSelection — Escape hotkey', () => {
+  it('clears the selection on Escape without preventing default', () => {
+    const dashboard: Dashboard = {
+      id: 'd1',
+      name: 'Test',
+      tiles: [],
+      tags: [],
+    };
+    const { hook } = renderSelectionHook(dashboard);
+
+    act(() => {
+      hook.result.current.setSelectedTileIds(new Set(['t1', 't2']));
+    });
+    expect(hook.result.current.selectedTileIds.size).toBe(2);
+
+    // useHotkeys listens on documentElement; dispatch there so the hotkey fires.
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true,
+    });
+    act(() => {
+      document.documentElement.dispatchEvent(event);
+    });
+
+    expect(hook.result.current.selectedTileIds.size).toBe(0);
+    // Overlays docked over the dashboard (e.g. the tile editor's settings
+    // panel) own Esc via a window listener that bails on defaultPrevented.
+    // Clearing the selection must not swallow the key, or those panels look
+    // frozen while open.
+    expect(event.defaultPrevented).toBe(false);
+
+    hook.unmount();
+  });
+});
diff --git a/packages/app/src/hooks/useDashboardKioskMode.ts b/packages/app/src/hooks/useDashboardKioskMode.ts
index 4e70defb94..cd3f1e3c62 100644
--- a/packages/app/src/hooks/useDashboardKioskMode.ts
+++ b/packages/app/src/hooks/useDashboardKioskMode.ts
@@ -17,7 +17,22 @@ export function useDashboardKioskMode() {
     void setIsKioskMode(null);
   }, [setIsKioskMode]);
 
-  useHotkeys([['Escape', exitKioskMode]]);
+  // Only consume Escape while actually in kiosk mode, and never preventDefault.
+  // Mantine's useHotkeys preventDefaults by default and listens on
+  // documentElement, which bubbles before window-level Esc handlers (e.g. the
+  // tile editor's docked settings panel). PreventDefaulting here marks the event
+  // handled, so those handlers — which bail on `event.defaultPrevented` — look
+  // dead while a panel is open. When kiosk mode is off the editor is what owns
+  // Esc, so leave the event untouched.
+  useHotkeys([
+    [
+      'Escape',
+      () => {
+        if (isKioskMode) exitKioskMode();
+      },
+      { preventDefault: false },
+    ],
+  ]);
 
   return {
     enterKioskMode,
diff --git a/packages/app/src/hooks/useTileSelection.ts b/packages/app/src/hooks/useTileSelection.ts
index 2870735b5b..63bb02160f 100644
--- a/packages/app/src/hooks/useTileSelection.ts
+++ b/packages/app/src/hooks/useTileSelection.ts
@@ -73,7 +73,13 @@ export default function useTileSelection({
         handleGroupSelected();
       },
     ],
-    ['escape', () => setSelectedTileIds(new Set())],
+    // Clearing the tile selection is a passive side-effect, not a consumption
+    // of the key, so don't preventDefault (Mantine's useHotkeys does by
+    // default). This listener sits on documentElement and fires before any
+    // window-level Esc handler; preventDefaulting here makes a docked overlay
+    // that guards on `event.defaultPrevented` — e.g. the tile editor's settings
+    // panel — bail out, leaving Esc looking dead while the panel is open.
+    ['escape', () => setSelectedTileIds(new Set()), { preventDefault: false }],
   ]);
 
   return {
diff --git a/packages/app/tests/e2e/components/ChartEditorComponent.ts b/packages/app/tests/e2e/components/ChartEditorComponent.ts
index f60719f286..1339c5988b 100644
--- a/packages/app/tests/e2e/components/ChartEditorComponent.ts
+++ b/packages/app/tests/e2e/components/ChartEditorComponent.ts
@@ -71,7 +71,7 @@ export class ChartEditorComponent {
     // Dismiss the autocomplete dropdown so it doesn't linger and overlay the
     // next input (e.g. the ORDER BY editor), which otherwise fails the click's
     // actionability check and times out. Uses blur (not Escape) so it can't
-    // close a surrounding modal (the dashboard tile editor). See the helper.
+    // close a surrounding drawer (the dashboard tile editor). See the helper.
     await dismissSqlAutocomplete(this.page);
   }
 
@@ -529,44 +529,60 @@ export class ChartEditorComponent {
   }
 
   /**
-   * Click Apply in the open Display Settings drawer and wait for it to close.
+   * The Display Settings container. In the dashboard tile editor this is a
+   * docked side panel (a Box with `data-testid="display-settings-panel"`); on
+   * Chart Explorer it's an overlay Drawer (`role="dialog"`). Match either so the
+   * shared helpers work in both contexts.
+   */
+  get displaySettingsContainer(): Locator {
+    return this.page
+      .getByTestId('display-settings-panel')
+      .or(this.page.getByRole('dialog', { name: 'Display Settings' }));
+  }
+
+  /**
+   * Click Apply in the open Display Settings panel/drawer and wait for it to close.
    */
   async applyDisplaySettings() {
-    const drawer = this.page.getByRole('dialog', { name: 'Display Settings' });
-    await drawer.getByRole('button', { name: 'Apply', exact: true }).click();
-    await drawer.waitFor({ state: 'hidden', timeout: 5000 });
+    const container = this.displaySettingsContainer;
+    await container.getByRole('button', { name: 'Apply', exact: true }).click();
+    await container.waitFor({ state: 'hidden', timeout: 5000 });
   }
 
   /**
-   * Set the "Series Limit" value in the Display Settings drawer. On pie/bar
-   * builder charts this caps the number of slices/bars displayed. Opens the
-   * drawer, fills the input, then applies and closes.
+   * Set the "Series Limit" value in the Display Settings panel/drawer. On
+   * pie/bar builder charts this caps the number of slices/bars displayed. Opens
+   * the settings, fills the input, then applies and closes.
    */
   async setSeriesLimit(limit: number) {
     await this.openDisplaySettings();
-    const drawer = this.page.getByRole('dialog', { name: 'Display Settings' });
-    await drawer.getByLabel('Series Limit').fill(String(limit));
+    await this.displaySettingsContainer
+      .getByLabel('Series Limit')
+      .fill(String(limit));
     await this.applyDisplaySettings();
   }
 
   /**
-   * Open the Display Settings drawer and wait for it to become visible.
+   * Open the Display Settings panel/drawer and wait for it to become visible.
    */
   async openDisplaySettings() {
     await this.page
       .getByRole('button', { name: 'Display Settings', exact: true })
       .click();
-    const drawer = this.page.getByRole('dialog', { name: 'Display Settings' });
-    await drawer.waitFor({ state: 'visible', timeout: 5000 });
+    await this.displaySettingsContainer.waitFor({
+      state: 'visible',
+      timeout: 5000,
+    });
   }
 
   /**
    * Toggle the "Display Group By Columns on Left" checkbox in the open
-   * Display Settings drawer to the given state.
+   * Display Settings panel/drawer to the given state.
    */
   async setGroupByColumnsOnLeft(checked: boolean) {
-    const drawer = this.page.getByRole('dialog', { name: 'Display Settings' });
-    const checkbox = drawer.getByLabel('Display Group By Columns on Left');
+    const checkbox = this.displaySettingsContainer.getByLabel(
+      'Display Group By Columns on Left',
+    );
     const isChecked = await checkbox.isChecked();
     if (isChecked !== checked) {
       await checkbox.click();
@@ -611,8 +627,8 @@ export class ChartEditorComponent {
    * preview panel. Waits for the table to be visible before reading.
    */
   async getPreviewTableHeaders(): Promise<string[]> {
-    const modalBody = this.page.locator('.mantine-Modal-body');
-    const table = modalBody.locator('table').first();
+    const drawerBody = this.page.locator('.mantine-Drawer-body');
+    const table = drawerBody.locator('table').first();
     await table.waitFor({ state: 'visible', timeout: 15000 });
     const headers = await table.locator('thead tr th').allTextContents();
     return headers.map(h => h.trim());
@@ -626,8 +642,8 @@ export class ChartEditorComponent {
    * reading.
    */
   async getPreviewTableCellTexts(columnIndex: number): Promise<string[]> {
-    const modalBody = this.page.locator('.mantine-Modal-body');
-    const table = modalBody.locator('table').first();
+    const drawerBody = this.page.locator('.mantine-Drawer-body');
+    const table = drawerBody.locator('table').first();
     await table.waitFor({ state: 'visible', timeout: 15000 });
     await table
       .locator('tbody tr[data-index]')
@@ -644,10 +660,12 @@ export class ChartEditorComponent {
   /**
    * Select the "Output format" option in whichever number format drawer is
    * currently open (Display Settings OR Series Display Settings). Both drawers
-   * embed the same NumberFormatForm with a NativeSelect labeled "Output format".
+   * embed the same NumberFormatForm with a Mantine Select labeled "Output
+   * format", so open the combobox and click the option.
    */
   async setNumberFormatOutput(label: string) {
-    await this.page.getByLabel('Output format').selectOption({ label });
+    await this.page.getByRole('combobox', { name: 'Output format' }).click();
+    await this.page.getByRole('option', { name: label, exact: true }).click();
   }
 
   /**