From e7db0c8e695a4dc8b3d2d746b477895217781c06 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 23 Jul 2026 19:18:22 +0100
Subject: [PATCH 01/19] feat(dashboards): move tile editor to a drawer with
 docked settings panel

Convert the dashboard tile create/edit modal into a right-side drawer.
Display Settings (and the heatmap variant) now dock as a full-height side
panel beside the editor/preview instead of stacking a second drawer, so the
tile stays visible while its options change and a single Esc closes only the
panel. The display-type tabs sit in a full-width bar above the editor+panel
row so they never wrap, and switching to a tab without settings (Search /
Patterns / Markdown) or the other variant closes the non-applicable panel.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .changeset/tile-editor-drawer.md              |   5 +
 packages/app/src/DBDashboardPage.tsx          |  26 +-
 .../components/ChartDisplaySettingsDrawer.tsx | 354 ++++++++--------
 .../DBEditTimeChartForm/EditTimeChartForm.tsx | 382 +++++++++++-------
 .../src/components/HeatmapSettingsDrawer.tsx  | 162 +++++---
 .../app/src/components/SettingsSidePanel.tsx  |  73 ++++
 6 files changed, 616 insertions(+), 386 deletions(-)
 create mode 100644 .changeset/tile-editor-drawer.md
 create mode 100644 packages/app/src/components/SettingsSidePanel.tsx

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 6ef9c691bb..575d06d80a 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,
@@ -1391,7 +1391,7 @@ const Tile = forwardRef(
   },
 );
 
-const EditTileModal = ({
+const EditTileDrawer = ({
   dashboardId,
   chart,
   onClose,
@@ -1407,7 +1407,7 @@ 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);
 
@@ -1442,18 +1442,22 @@ const EditTileModal = ({
   }, [confirm, isSaving, hasUnsavedChanges, onClose]);
 
   return (
-    <Modal
+    <Drawer
       opened={chart != null}
       onClose={handleClose}
       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
@@ -1475,7 +1479,7 @@ const EditTileModal = ({
           </IsolatedChartSyncProvider>
         </ZIndexContext.Provider>
       )}
-    </Modal>
+    </Drawer>
   );
 };
 
@@ -2860,7 +2864,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         </title>
       </Head>
       <OnboardingModal />
-      <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..a4a87d6c66 100644
--- a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
+++ b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
@@ -32,6 +32,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 +77,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 +124,7 @@ export default function ChartDisplaySettingsDrawer({
   onClose,
   previousDateRange,
   isPerSeriesNumberFormatAllowed = false,
+  asPanel = false,
 }: ChartDisplaySettingsDrawerProps) {
   const appliedDefaults = useMemo(
     () => applyDefaultSettings(settings, defaultNumberFormat),
@@ -213,83 +223,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"
+  const content = (
+    <Stack>
+      {isTimeChart && (
+        <>
+          <CheckBoxControlled
+            control={control}
+            name="alignDateRangeToGranularity"
+            size="xs"
+            label="Show Complete Intervals"
+          />
+          <Box>
+            <Checkbox
               size="xs"
-              label="Show Complete Intervals"
+              label="Fill Missing Intervals with Zero"
+              checked={isFillNullsEnabled}
+              onChange={e => {
+                setValue('fillNulls', e.currentTarget.checked ? 0 : false);
+              }}
             />
-            <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"
-              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}
-                  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 +275,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 +287,159 @@ 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 />
-          </>
-        )}
-
-        {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 />
-          </>
-        )}
+          )}
+          <CheckBoxControlled
+            control={control}
+            name="alternateRowBackground"
+            size="xs"
+            label="Alternate Row Background"
+          />
+          <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="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>
+  );
+
+  // 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..8e10373ca5 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -346,6 +346,54 @@ export default function EditTimeChartForm({
     { open: openHeatmapSettings, close: closeHeatmapSettings },
   ] = useDisclosure(false);
 
+  // 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);
+
+  // While a settings side panel is open, Esc should just close the panel rather
+  // than closing the whole tile drawer. Intercept on the capture phase and stop
+  // propagation so the drawer's own (bubble-phase) Esc handler never fires —
+  // this is what fixes a single Esc press closing both.
+  useEffect(() => {
+    if (!showSettingsPanel) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        closeDisplaySettings();
+        closeHeatmapSettings();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => window.removeEventListener('keydown', handleKeyDown, true);
+  }, [showSettingsPanel, 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)
@@ -709,8 +757,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 +781,6 @@ export default function EditTimeChartForm({
               value={value}
               onChange={onChange}
               radius={'xs'}
-              mb="md"
               data-testid="chart-type-input"
             >
               <Tabs.List>
@@ -781,166 +842,195 @@ 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,
+            minWidth: 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/HeatmapSettingsDrawer.tsx b/packages/app/src/components/HeatmapSettingsDrawer.tsx
index bc0d0a87d6..db2c9f7ac4 100644
--- a/packages/app/src/components/HeatmapSettingsDrawer.tsx
+++ b/packages/app/src/components/HeatmapSettingsDrawer.tsx
@@ -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,6 +42,12 @@ 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),
@@ -57,6 +66,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 +160,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/SettingsSidePanel.tsx b/packages/app/src/components/SettingsSidePanel.tsx
new file mode 100644
index 0000000000..cc3695fba4
--- /dev/null
+++ b/packages/app/src/components/SettingsSidePanel.tsx
@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import {
+  ActionIcon,
+  Box,
+  Group,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+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;
+}) {
+  return (
+    <Box
+      data-testid={dataTestId}
+      style={{
+        flexShrink: 0,
+        width: 340,
+        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 size="sm" fw={600}>
+          {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>
+  );
+}

From c175e9aaebe6717900e2b12a4205d5ce2de5e556 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 23 Jul 2026 19:40:27 +0100
Subject: [PATCH 02/19] test(e2e): update ChartEditorComponent selectors for
 tile editor drawer

The dashboard tile editor was converted from a Modal to a Drawer, with
Display Settings now rendered as a docked side panel instead of a nested
Drawer. Update the shared ChartEditorComponent page object to match:

- Preview table helpers now target .mantine-Drawer-body instead of
  .mantine-Modal-body
- Display Settings helpers match either the dashboard side panel
  (data-testid) or the Chart Explorer drawer (role=dialog) so both
  contexts work

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../e2e/components/ChartEditorComponent.ts    | 49 ++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/app/tests/e2e/components/ChartEditorComponent.ts b/packages/app/tests/e2e/components/ChartEditorComponent.ts
index f60719f286..7207846d00 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,35 +529,50 @@ 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,
+    });
   }
 
   /**
@@ -611,8 +626,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 +641,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]')

From 7aa704e12ba7b5d4e95e94d1dfc82d7175250ee4 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 27 Jul 2026 10:16:17 +0100
Subject: [PATCH 03/19] test(e2e): use displaySettingsContainer for
 group-by-columns toggle

setGroupByColumnsOnLeft still targeted the Display Settings dialog
directly, which times out in the dashboard where Display Settings is now
a docked side panel. Route it through the shared displaySettingsContainer
locator so it matches either the panel or the drawer.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/tests/e2e/components/ChartEditorComponent.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/app/tests/e2e/components/ChartEditorComponent.ts b/packages/app/tests/e2e/components/ChartEditorComponent.ts
index 7207846d00..a82035f932 100644
--- a/packages/app/tests/e2e/components/ChartEditorComponent.ts
+++ b/packages/app/tests/e2e/components/ChartEditorComponent.ts
@@ -577,11 +577,12 @@ export class ChartEditorComponent {
 
   /**
    * 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();

From 55f00918b71318832e022e616bf33fb5ea80da79 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 27 Jul 2026 11:41:25 +0100
Subject: [PATCH 04/19] fix(dashboards): treat every settings-panel dismiss as
 cancel and stop swallowing nested Esc
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The tile editor's Esc interceptor and tab-change cleanup close the
settings panels via the bare useDisclosure close(), bypassing each
child's handleClose reset. Abandoned sub-form edits therefore stayed
latched and were written into the tile config by the next Apply. Reset
the sub-form on the closed→open transition in both ChartDisplaySettingsDrawer
and HeatmapSettingsDrawer so every dismiss path behaves like cancel.

Also stop the capture-phase Esc handler from calling stopPropagation on
every Escape: bail out when the key originated inside a nested overlay
(popover dropdown, code editor, select listbox, dialog) or was already
handled, so those widgets can consume their own Esc instead of having it
swallowed before they ever see it.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/ChartDisplaySettingsDrawer.tsx | 10 +++++++--
 .../DBEditTimeChartForm/EditTimeChartForm.tsx | 21 +++++++++++++++----
 .../src/components/HeatmapSettingsDrawer.tsx  | 10 +++++++--
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
index a4a87d6c66..b75610630d 100644
--- a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
+++ b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
@@ -141,9 +141,15 @@ export default function ChartDisplaySettingsDrawer({
     defaultValues: appliedDefaults,
   });
 
+  // Reset on the closed→open transition (and whenever the applied config
+  // changes while open) 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.
   useEffect(() => {
-    reset(appliedDefaults);
-  }, [appliedDefaults, reset]);
+    if (opened) {
+      reset(appliedDefaults);
+    }
+  }, [opened, appliedDefaults, reset]);
 
   const fillNulls = useWatch({ control, name: 'fillNulls' });
   const isFillNullsEnabled = shouldFillNullsWithZero(fillNulls);
diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 8e10373ca5..f30f303c31 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -358,14 +358,27 @@ export default function EditTimeChartForm({
   // than closing the whole tile drawer. Intercept on the capture phase and stop
   // propagation so the drawer's own (bubble-phase) Esc handler never fires —
   // this is what fixes a single Esc press closing both.
+  //
+  // Bail out when Esc originated inside a nested overlay (popover dropdown, code
+  // editor, select listbox, dialog) or has already been handled, so those
+  // widgets get to consume their own Esc (e.g. closing an autocomplete) instead
+  // of us swallowing the key before they ever see it.
   useEffect(() => {
     if (!showSettingsPanel) return;
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation();
-        closeDisplaySettings();
-        closeHeatmapSettings();
+      if (e.key !== 'Escape' || e.defaultPrevented) return;
+      const target = e.target;
+      if (
+        target instanceof HTMLElement &&
+        target.closest(
+          '.mantine-Popover-dropdown, .cm-editor, [role="dialog"], [role="listbox"]',
+        )
+      ) {
+        return;
       }
+      e.stopPropagation();
+      closeDisplaySettings();
+      closeHeatmapSettings();
     };
     window.addEventListener('keydown', handleKeyDown, true);
     return () => window.removeEventListener('keydown', handleKeyDown, true);
diff --git a/packages/app/src/components/HeatmapSettingsDrawer.tsx b/packages/app/src/components/HeatmapSettingsDrawer.tsx
index db2c9f7ac4..88fef85c0c 100644
--- a/packages/app/src/components/HeatmapSettingsDrawer.tsx
+++ b/packages/app/src/components/HeatmapSettingsDrawer.tsx
@@ -54,10 +54,16 @@ export default function HeatmapSettingsDrawer({
     defaultValues,
   });
 
+  // Reset on the closed→open transition (and whenever the applied config
+  // changes while open) 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.
   useEffect(() => {
-    form.reset(defaultValues);
+    if (opened) {
+      form.reset(defaultValues);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- form object is stable from useForm
-  }, [defaultValues]);
+  }, [opened, defaultValues]);
 
   const handleClose = useCallback(() => {
     form.reset(defaultValues);

From 1cfc7ac9de724da1cae9c859e8072521e1f5e51b Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Mon, 27 Jul 2026 12:07:28 +0100
Subject: [PATCH 05/19] fix(dashboards): don't let containing drawer swallow
 settings-panel Esc

The tile editor's own Drawer has role="dialog", so target.closest() matched
it and the handler bailed before stopping propagation, closing the whole
editor on Esc. Ignore a match that wraps the form (the containing drawer) and
only bail for overlays genuinely nested inside the panel.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../DBEditTimeChartForm/EditTimeChartForm.tsx | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index f30f303c31..16112463c8 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -346,6 +346,9 @@ 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
@@ -368,13 +371,14 @@ export default function EditTimeChartForm({
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key !== 'Escape' || e.defaultPrevented) return;
       const target = e.target;
-      if (
-        target instanceof HTMLElement &&
-        target.closest(
+      if (target instanceof HTMLElement) {
+        const overlay = target.closest(
           '.mantine-Popover-dropdown, .cm-editor, [role="dialog"], [role="listbox"]',
-        )
-      ) {
-        return;
+        );
+        // A match that wraps the form is the containing tile drawer, not a
+        // nested overlay — don't bail, or Esc would fall through and close the
+        // whole editor. Only bail for overlays nested inside the panel.
+        if (overlay && !overlay.contains(parentRef)) return;
       }
       e.stopPropagation();
       closeDisplaySettings();
@@ -382,7 +386,12 @@ export default function EditTimeChartForm({
     };
     window.addEventListener('keydown', handleKeyDown, true);
     return () => window.removeEventListener('keydown', handleKeyDown, true);
-  }, [showSettingsPanel, closeDisplaySettings, closeHeatmapSettings]);
+  }, [
+    showSettingsPanel,
+    parentRef,
+    closeDisplaySettings,
+    closeHeatmapSettings,
+  ]);
 
   // Whether the current tab has a regular Display Settings view. Search,
   // Patterns and Markdown have none; Heatmap uses its own variant instead.
@@ -677,9 +686,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(
     (
       {

From 44048e0d76946a6c029467be1576cc7dcbf35f22 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 11:42:50 +0100
Subject: [PATCH 06/19] fix(dashboards): let settings panel own Esc and stop
 discarding unapplied edits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Disable the tile Drawer's Esc-to-close while a settings panel is docked and
let the panel own Esc, so Esc closes only the panel — even from inside the
code editor — instead of dismissing the whole tile editor. Also edge-trigger
the display-settings reset on the closed->open transition (via a ref) rather
than on appliedDefaults identity, so editing a series in the main form no
longer wipes the panel's unapplied edits and dirty state.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/DBDashboardPage.tsx          |  5 ++
 .../components/ChartDisplaySettingsDrawer.tsx | 17 +++---
 .../DBEditTimeChartForm/EditTimeChartForm.tsx | 54 ++++++++++---------
 3 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 575d06d80a..4aea990478 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -1410,6 +1410,9 @@ const EditTileDrawer = ({
   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
@@ -1445,6 +1448,7 @@ const EditTileDrawer = ({
     <Drawer
       opened={chart != null}
       onClose={handleClose}
+      closeOnEscape={!settingsPanelOpen}
       withCloseButton={false}
       position="right"
       size="90%"
@@ -1473,6 +1477,7 @@ const EditTileDrawer = ({
               }}
               onClose={handleClose}
               onDirtyChange={setHasUnsavedChanges}
+              onSettingsPanelOpenChange={setSettingsPanelOpen}
               isDashboardForm
               autoRun
             />
diff --git a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
index b75610630d..1f161dfe07 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,
@@ -141,14 +141,19 @@ export default function ChartDisplaySettingsDrawer({
     defaultValues: appliedDefaults,
   });
 
-  // Reset on the closed→open transition (and whenever the applied config
-  // changes while open) 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.
+  // 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 wasOpened = useRef(false);
   useEffect(() => {
-    if (opened) {
+    if (opened && !wasOpened.current) {
       reset(appliedDefaults);
     }
+    wasOpened.current = opened;
   }, [opened, appliedDefaults, reset]);
 
   const fillNulls = useWatch({ control, name: 'fillNulls' });
diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 16112463c8..732c1ae096 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -108,6 +108,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 +151,7 @@ export default function EditTimeChartForm({
   'data-testid': dataTestId,
   submitRef,
   isDashboardForm = false,
+  onSettingsPanelOpenChange,
   autoRun = false,
 }: EditTimeChartFormProps) {
   const formValue: ChartEditorFormState = useMemo(
@@ -357,41 +363,37 @@ export default function EditTimeChartForm({
   const showSettingsPanel =
     isDashboardForm && (displaySettingsOpened || heatmapSettingsOpened);
 
-  // While a settings side panel is open, Esc should just close the panel rather
-  // than closing the whole tile drawer. Intercept on the capture phase and stop
-  // propagation so the drawer's own (bubble-phase) Esc handler never fires —
-  // this is what fixes a single Esc press closing both.
-  //
-  // Bail out when Esc originated inside a nested overlay (popover dropdown, code
-  // editor, select listbox, dialog) or has already been handled, so those
-  // widgets get to consume their own Esc (e.g. closing an autocomplete) instead
-  // of us swallowing the key before they ever see it.
+  // 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.
+  useEffect(() => {
+    onSettingsPanelOpenChange?.(showSettingsPanel);
+  }, [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 (popover
+  // dropdown, code editor, select listbox) or was already handled, so those
+  // widgets consume their own Esc (e.g. closing an autocomplete) first.
   useEffect(() => {
     if (!showSettingsPanel) return;
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key !== 'Escape' || e.defaultPrevented) return;
       const target = e.target;
-      if (target instanceof HTMLElement) {
-        const overlay = target.closest(
-          '.mantine-Popover-dropdown, .cm-editor, [role="dialog"], [role="listbox"]',
-        );
-        // A match that wraps the form is the containing tile drawer, not a
-        // nested overlay — don't bail, or Esc would fall through and close the
-        // whole editor. Only bail for overlays nested inside the panel.
-        if (overlay && !overlay.contains(parentRef)) return;
+      if (
+        target instanceof HTMLElement &&
+        target.closest(
+          '.mantine-Popover-dropdown, .cm-editor, [role="listbox"]',
+        )
+      ) {
+        return;
       }
-      e.stopPropagation();
       closeDisplaySettings();
       closeHeatmapSettings();
     };
-    window.addEventListener('keydown', handleKeyDown, true);
-    return () => window.removeEventListener('keydown', handleKeyDown, true);
-  }, [
-    showSettingsPanel,
-    parentRef,
-    closeDisplaySettings,
-    closeHeatmapSettings,
-  ]);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [showSettingsPanel, closeDisplaySettings, closeHeatmapSettings]);
 
   // Whether the current tab has a regular Display Settings view. Search,
   // Patterns and Markdown have none; Heatmap uses its own variant instead.

From 92f6a5443fca329e54a6bb1ba44fc5ce6d41dead Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 11:53:14 +0100
Subject: [PATCH 07/19] fix(dashboards): rename wasOpened ref to satisfy
 ref-name lint rule

Ref identifiers must end in "Ref"; the unsuffixed name added one warning that
tripped the app package's max-warnings cap and failed CI lint.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/components/ChartDisplaySettingsDrawer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
index 1f161dfe07..5a767c9ce7 100644
--- a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
+++ b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
@@ -148,12 +148,12 @@ export default function ChartDisplaySettingsDrawer({
   // `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 wasOpened = useRef(false);
+  const wasOpenedRef = useRef(false);
   useEffect(() => {
-    if (opened && !wasOpened.current) {
+    if (opened && !wasOpenedRef.current) {
       reset(appliedDefaults);
     }
-    wasOpened.current = opened;
+    wasOpenedRef.current = opened;
   }, [opened, appliedDefaults, reset]);
 
   const fillNulls = useWatch({ control, name: 'fillNulls' });

From f6cfd106c552da9d9726acf1dcd02d686c5a5c32 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 11:56:51 +0100
Subject: [PATCH 08/19] fix(dashboards): let an open Select consume Esc before
 the settings panel

A Mantine Select keeps DOM focus on its input via aria-activedescendant, so
neither [role="listbox"] nor .mantine-Popover-dropdown matches the Esc target
and the whole panel closed instead of the open dropdown. Also bail when the
target is inside an expanded combobox ([aria-expanded="true"]).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/DBEditTimeChartForm/EditTimeChartForm.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 732c1ae096..48969841ad 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -374,7 +374,10 @@ export default function EditTimeChartForm({
   // 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 (popover
   // dropdown, code editor, select listbox) or was already handled, so those
-  // widgets consume their own Esc (e.g. closing an autocomplete) first.
+  // widgets consume their own Esc (e.g. closing an autocomplete) first. A
+  // Mantine Select keeps DOM focus on its input (via aria-activedescendant)
+  // rather than the listbox, so also bail on an expanded combobox so its Esc
+  // closes the dropdown instead of the whole panel.
   useEffect(() => {
     if (!showSettingsPanel) return;
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -383,7 +386,7 @@ export default function EditTimeChartForm({
       if (
         target instanceof HTMLElement &&
         target.closest(
-          '.mantine-Popover-dropdown, .cm-editor, [role="listbox"]',
+          '.mantine-Popover-dropdown, .cm-editor, [role="listbox"], [aria-expanded="true"]',
         )
       ) {
         return;

From 9ebe72b294888b08bba8e830423f89fac63362db Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 11:58:12 +0100
Subject: [PATCH 09/19] fix(dashboards): stop docked settings panel from
 crushing the editor column

Cap the panel at min(340px, 45%) so it yields on narrow viewports inside the
90% tile drawer, and give the editor column a 320px minWidth floor when a panel
can dock beside it (kept at 0 on Chart Explorer).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/DBEditTimeChartForm/EditTimeChartForm.tsx | 5 ++++-
 packages/app/src/components/SettingsSidePanel.tsx            | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 48969841ad..30b626ab27 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -884,7 +884,10 @@ export default function EditTimeChartForm({
           pb={isDashboardForm ? 'md' : undefined}
           style={{
             flex: 1,
-            minWidth: 0,
+            // 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 }
               : {}),
diff --git a/packages/app/src/components/SettingsSidePanel.tsx b/packages/app/src/components/SettingsSidePanel.tsx
index cc3695fba4..585e714042 100644
--- a/packages/app/src/components/SettingsSidePanel.tsx
+++ b/packages/app/src/components/SettingsSidePanel.tsx
@@ -31,7 +31,9 @@ export default function SettingsSidePanel({
       data-testid={dataTestId}
       style={{
         flexShrink: 0,
-        width: 340,
+        // 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',

From b09d7c9466438079cdbd4ccbd0bac01501d5978d Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 12:06:40 +0100
Subject: [PATCH 10/19] fix(dashboards): don't let a focused code editor
 swallow the panel's Esc
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dropped the blanket .cm-editor exemption from the settings-panel Esc handler.
CodeMirror only calls preventDefault when it actually consumes Esc (e.g.
closing an open autocomplete), which the defaultPrevented guard already
handles; exempting it wholesale left Esc doing nothing — and the panel open —
whenever a SQL editor was focused without a completion showing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../DBEditTimeChartForm/EditTimeChartForm.tsx    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 30b626ab27..84d05149f3 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -372,12 +372,14 @@ export default function EditTimeChartForm({
 
   // 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 (popover
-  // dropdown, code editor, select listbox) or was already handled, so those
-  // widgets consume their own Esc (e.g. closing an autocomplete) first. A
-  // Mantine Select keeps DOM focus on its input (via aria-activedescendant)
-  // rather than the listbox, so also bail on an expanded combobox so its Esc
-  // closes the dropdown instead of the whole panel.
+  // propagation. Bail out when Esc originated inside a nested overlay that
+  // consumes it: a popover dropdown, a select listbox, or an expanded combobox
+  // (a Mantine Select keeps DOM focus on its input via aria-activedescendant,
+  // so match the input itself). 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.
   useEffect(() => {
     if (!showSettingsPanel) return;
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -386,7 +388,7 @@ export default function EditTimeChartForm({
       if (
         target instanceof HTMLElement &&
         target.closest(
-          '.mantine-Popover-dropdown, .cm-editor, [role="listbox"], [aria-expanded="true"]',
+          '.mantine-Popover-dropdown, [role="listbox"], [aria-expanded="true"]',
         )
       ) {
         return;

From 70f17f68cb9a13c29e5d0e0f12a727bf137ed85e Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 12:26:00 +0100
Subject: [PATCH 11/19] fix(dashboards): stop native select Esc from closing
 the settings panel

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../DBEditTimeChartForm/EditTimeChartForm.tsx     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 84d05149f3..1b0519f6a9 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -375,11 +375,14 @@ export default function EditTimeChartForm({
   // propagation. Bail out when Esc originated inside a nested overlay that
   // consumes it: a popover dropdown, a select listbox, or an expanded combobox
   // (a Mantine Select keeps DOM focus on its input via aria-activedescendant,
-  // so match the input itself). 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.
+  // so match the input itself). Native <select> elements (e.g. the number
+  // format selector) are also exempt: they render no listbox/aria-expanded, so
+  // the Esc the browser uses to dismiss their popup would otherwise bubble up
+  // and close the panel, discarding unapplied settings. 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.
   useEffect(() => {
     if (!showSettingsPanel) return;
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -388,7 +391,7 @@ export default function EditTimeChartForm({
       if (
         target instanceof HTMLElement &&
         target.closest(
-          '.mantine-Popover-dropdown, [role="listbox"], [aria-expanded="true"]',
+          '.mantine-Popover-dropdown, [role="listbox"], [aria-expanded="true"], select',
         )
       ) {
         return;

From 31c49d549cd2d3b076306635363c80f634155aca Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 12:40:40 +0100
Subject: [PATCH 12/19] fix(dashboards): use Mantine Select for number format
 so Esc doesn't close the panel

Native <select> exposes no open/closed state to JS, so the docked settings
panel's window-level Escape handler could not tell whether Esc dismissed the
select popup or should close the panel. Chrome/Safari fire no keydown while a
native select popup is open (so the panel stayed open) but Firefox/IE do (so
the panel closed, discarding unapplied settings); exempting native <select>
wholesale then broke closing the panel when a closed select had focus.

Convert the number-format controls to Mantine Select, whose open state is
visible via aria-expanded/role="listbox" (already matched by the handler) and
which does not swallow Esc when closed, and drop the native-select exemption.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../DBEditTimeChartForm/EditTimeChartForm.tsx | 19 +++++++-------
 packages/app/src/components/NumberFormat.tsx  | 25 ++++++++++++-------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index 1b0519f6a9..c1bc578f95 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -375,14 +375,15 @@ export default function EditTimeChartForm({
   // propagation. Bail out when Esc originated inside a nested overlay that
   // consumes it: a popover dropdown, a select listbox, or an expanded combobox
   // (a Mantine Select keeps DOM focus on its input via aria-activedescendant,
-  // so match the input itself). Native <select> elements (e.g. the number
-  // format selector) are also exempt: they render no listbox/aria-expanded, so
-  // the Esc the browser uses to dismiss their popup would otherwise bubble up
-  // and close the panel, discarding unapplied settings. 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.
+  // so match the input itself). Every dismissible control inside the panel is a
+  // JS combobox (Mantine Select) rather than a native <select>, so its open
+  // state is visible here via aria-expanded/role="listbox"; a closed control
+  // exposes neither 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.
   useEffect(() => {
     if (!showSettingsPanel) return;
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -391,7 +392,7 @@ export default function EditTimeChartForm({
       if (
         target instanceof HTMLElement &&
         target.closest(
-          '.mantine-Popover-dropdown, [role="listbox"], [aria-expanded="true"], select',
+          '.mantine-Popover-dropdown, [role="listbox"], [aria-expanded="true"]',
         )
       ) {
         return;
diff --git a/packages/app/src/components/NumberFormat.tsx b/packages/app/src/components/NumberFormat.tsx
index 16d658c2ee..ef713bf509 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,18 @@ 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 => {
+                value={field.value ?? null}
+                allowDeselect={false}
+                onChange={value => {
+                  if (!value) return;
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
-                  const newOutput = e.target.value as NumberFormat['output'];
+                  const newOutput = value as NumberFormat['output'];
                   onChange(newOutput);
                   setValue(
                     'numberFormat.numericUnit',
@@ -220,13 +223,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 +321,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}
                   />
                 );

From 979c47676e0f4ee7e59355c4b8184e42b1985c1a Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 12:53:14 +0100
Subject: [PATCH 13/19] fix(dashboards): fix CI for number format Select
 conversion

- Remove now-unused no-unsafe-type-assertion eslint-disable in NumberFormat
  (Mantine Select's onChange value no longer trips the rule), which had pushed
  app warnings to 741 over the --max-warnings 740 lint budget.
- Update ChartDisplaySettingsDrawer test to drive the output format via the
  Mantine combobox (click + option) instead of native selectOptions, and mock
  HTMLElement.prototype.scrollIntoView as the other Combobox tests do.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/components/NumberFormat.tsx           |  1 -
 .../__tests__/ChartDisplaySettingsDrawer.test.tsx      | 10 ++++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/NumberFormat.tsx b/packages/app/src/components/NumberFormat.tsx
index ef713bf509..4b50b08322 100644
--- a/packages/app/src/components/NumberFormat.tsx
+++ b/packages/app/src/components/NumberFormat.tsx
@@ -194,7 +194,6 @@ export const NumberFormatForm: React.FC<{
                 allowDeselect={false}
                 onChange={value => {
                   if (!value) return;
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
                   const newOutput = value as NumberFormat['output'];
                   onChange(newOutput);
                   setValue(
diff --git a/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx b/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
index e07419a2b5..fa43b3959b 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 }));
 

From 0413fc1d3fecb9beabe571f191c4acfa45ff328a Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 12:56:35 +0100
Subject: [PATCH 14/19] fix(dashboards): drive number format E2E via Mantine
 combobox

The chart-wide/per-series number format E2E helper still used the native
selectOption API against getByLabel('Output format'), which now resolves to
both the Mantine Select input and its listbox (strict-mode violation). Open the
combobox and click the option, matching the pattern used by the other Select
helpers in this component.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/tests/e2e/components/ChartEditorComponent.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/app/tests/e2e/components/ChartEditorComponent.ts b/packages/app/tests/e2e/components/ChartEditorComponent.ts
index a82035f932..1339c5988b 100644
--- a/packages/app/tests/e2e/components/ChartEditorComponent.ts
+++ b/packages/app/tests/e2e/components/ChartEditorComponent.ts
@@ -660,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();
   }
 
   /**

From 542264e53c1dcde0234b620c810dd3b6deb0f41f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 14:56:29 +0100
Subject: [PATCH 15/19] fix(dashboards): close Esc race that dismissed the
 whole tile editor

The docked settings panel reported its open state to the containing tile
Drawer through a passive effect, so closeOnEscape flipped to false only
after paint. An Esc pressed right after opening a panel still reached
Mantine's capture-phase handler while closeOnEscape was true and tore down
the entire editor. Report the panel state from a layout effect (pre-paint)
and attach the panel's own Esc listener the same way, preventDefault after
closing so any late listener bails on the defaultPrevented guard, and only
close the panel that is actually open.

Add regression coverage for behavior that had none: the docked-panel Esc
contract in DBEditTimeChartForm (isDashboardForm) and the asPanel render
path in ChartDisplaySettingsDrawer.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../DBEditTimeChartForm/EditTimeChartForm.tsx | 39 +++++++--
 .../__tests__/DBEditTimeChartForm.test.tsx    | 82 +++++++++++++++++++
 .../ChartDisplaySettingsDrawer.test.tsx       | 51 ++++++++++++
 3 files changed, 166 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index c1bc578f95..ffc4c71665 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,
@@ -366,7 +370,16 @@ export default function EditTimeChartForm({
   // 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.
-  useEffect(() => {
+  //
+  // 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);
   }, [showSettingsPanel, onSettingsPanelOpenChange]);
 
@@ -384,7 +397,11 @@ export default function EditTimeChartForm({
   // autocomplete), which the defaultPrevented guard above already covers;
   // exempting it wholesale would swallow Esc and leave the panel open when no
   // completion is showing.
-  useEffect(() => {
+  // 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;
@@ -397,12 +414,22 @@ export default function EditTimeChartForm({
       ) {
         return;
       }
-      closeDisplaySettings();
-      closeHeatmapSettings();
+      // 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, closeDisplaySettings, closeHeatmapSettings]);
+  }, [
+    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.
diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
index 7796fdee80..7f494e6068 100644
--- a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
@@ -141,6 +141,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 +624,81 @@ 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);
+  });
+
+  it('ignores Escape originating inside an open combobox/listbox', async () => {
+    renderDashboardForm();
+
+    await userEvent.click(screen.getByTestId('display-settings-button'));
+    expect(
+      await screen.findByTestId('display-settings-panel'),
+    ).toBeInTheDocument();
+
+    // Simulate Esc dispatched while a Mantine Select dropdown is open: the
+    // target sits inside an [aria-expanded="true"] combobox, so the dropdown
+    // consumes that Esc and the panel must stay open.
+    const openCombobox = document.createElement('div');
+    openCombobox.setAttribute('aria-expanded', 'true');
+    document.body.appendChild(openCombobox);
+    fireEvent.keyDown(openCombobox, { key: 'Escape' });
+
+    expect(screen.getByTestId('display-settings-panel')).toBeInTheDocument();
+    openCombobox.remove();
+  });
+});
diff --git a/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx b/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
index fa43b3959b..c87d32d846 100644
--- a/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
+++ b/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
@@ -569,4 +569,55 @@ 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();
+    });
+
+    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);
+    });
+  });
 });

From efc1f5fd11883d92f0e35f4cc3ac17e4f4e73c1b Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 15:22:25 +0100
Subject: [PATCH 16/19] fix(dashboards): address deep-review P2s on the docked
 settings panel

- Narrow the settings-panel Esc exemption from a bare [aria-expanded="true"]
  to combobox-like controls only, so a focused Accordion.Control in the
  preview no longer swallows Esc and freezes the panel open.
- Reset the parent drawer's settingsPanelOpen flag when the form unmounts
  with a panel still docked, so its Esc-to-close is not left disabled.
- Make HeatmapSettingsDrawer's reset edge-triggered on the closed->open
  transition (wasOpenedRef), matching ChartDisplaySettingsDrawer, so a
  source/field change while the panel is open no longer wipes unapplied edits.
- Give SettingsSidePanel an accessible landmark: role="region" labelled by a
  heading title, restoring the accessible name the replaced Drawer provided.

Add regression tests for the narrowed Esc exemption (combobox stays open,
non-combobox disclosure closes) and the panel's labelled-region role.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../DBEditTimeChartForm/EditTimeChartForm.tsx | 28 ++++++++-----
 .../__tests__/DBEditTimeChartForm.test.tsx    | 40 ++++++++++++++++---
 .../src/components/HeatmapSettingsDrawer.tsx  | 19 ++++++---
 .../app/src/components/SettingsSidePanel.tsx  |  9 ++++-
 .../ChartDisplaySettingsDrawer.test.tsx       |  4 ++
 5 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
index ffc4c71665..de67a82d65 100644
--- a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -381,20 +381,28 @@ export default function EditTimeChartForm({
   // 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 expanded combobox
-  // (a Mantine Select keeps DOM focus on its input via aria-activedescendant,
-  // so match the input itself). Every dismissible control inside the panel is a
-  // JS combobox (Mantine Select) rather than a native <select>, so its open
-  // state is visible here via aria-expanded/role="listbox"; a closed control
-  // exposes neither 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;
+  // 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
@@ -409,7 +417,7 @@ export default function EditTimeChartForm({
       if (
         target instanceof HTMLElement &&
         target.closest(
-          '.mantine-Popover-dropdown, [role="listbox"], [aria-expanded="true"]',
+          '.mantine-Popover-dropdown, [role="listbox"], [role="combobox"][aria-expanded="true"], [aria-haspopup="listbox"][aria-expanded="true"]',
         )
       ) {
         return;
diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
index 7f494e6068..b3609941e9 100644
--- a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
@@ -682,7 +682,16 @@ describe('DBEditTimeChartForm - Docked settings panel Esc contract', () => {
     expect(onSettingsPanelOpenChange).toHaveBeenLastCalledWith(false);
   });
 
-  it('ignores Escape originating inside an open combobox/listbox', async () => {
+  // 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'));
@@ -690,15 +699,36 @@ describe('DBEditTimeChartForm - Docked settings panel Esc contract', () => {
       await screen.findByTestId('display-settings-panel'),
     ).toBeInTheDocument();
 
-    // Simulate Esc dispatched while a Mantine Select dropdown is open: the
-    // target sits inside an [aria-expanded="true"] combobox, so the dropdown
-    // consumes that Esc and the panel must stay open.
     const openCombobox = document.createElement('div');
-    openCombobox.setAttribute('aria-expanded', 'true');
+    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();
+  });
 });
diff --git a/packages/app/src/components/HeatmapSettingsDrawer.tsx b/packages/app/src/components/HeatmapSettingsDrawer.tsx
index 88fef85c0c..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';
@@ -54,14 +54,21 @@ export default function HeatmapSettingsDrawer({
     defaultValues,
   });
 
-  // Reset on the closed→open transition (and whenever the applied config
-  // changes while open) 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.
+  // 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(() => {
-    if (opened) {
+    if (opened && !wasOpenedRef.current) {
       form.reset(defaultValues);
     }
+    wasOpenedRef.current = opened;
     // eslint-disable-next-line react-hooks/exhaustive-deps -- form object is stable from useForm
   }, [opened, defaultValues]);
 
diff --git a/packages/app/src/components/SettingsSidePanel.tsx b/packages/app/src/components/SettingsSidePanel.tsx
index 585e714042..3c18453bf2 100644
--- a/packages/app/src/components/SettingsSidePanel.tsx
+++ b/packages/app/src/components/SettingsSidePanel.tsx
@@ -7,6 +7,7 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
+import { useId } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
 
 /**
@@ -26,9 +27,15 @@ export default function SettingsSidePanel({
   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
@@ -47,7 +54,7 @@ export default function SettingsSidePanel({
         py="sm"
         style={{ borderBottom: '1px solid var(--color-border)' }}
       >
-        <Text size="sm" fw={600}>
+        <Text id={titleId} component="h2" size="sm" fw={600} m={0}>
           {title}
         </Text>
         <Tooltip label="Close" position="bottom">
diff --git a/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx b/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
index c87d32d846..52d9cdea96 100644
--- a/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
+++ b/packages/app/src/components/__tests__/ChartDisplaySettingsDrawer.test.tsx
@@ -585,6 +585,10 @@ describe('ChartDisplaySettingsDrawer', () => {
       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', () => {

From fa72ae5531858f5f7916a1216f37ba86685a6a8f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 16:17:11 +0100
Subject: [PATCH 17/19] fix(dashboards): let the docked settings panel own Esc
 over tile-selection

The dashboard's tile-selection Escape hotkey (useTileSelection) fired with
Mantine's default preventDefault, marking the keypress handled on
documentElement before it reached the docked settings panel's window listener,
which bails on event.defaultPrevented. With the tile-editor Drawer's
closeOnEscape disabled while a panel is open, Esc then did nothing. Make the
selection-clear hotkey passive (preventDefault:false) so the panel keeps
owning Esc.

Add regression coverage (useTileSelection Esc clears selection while leaving
defaultPrevented false; the panel closes on Esc inside a real Drawer) and give
the per-series number-format disclaimer an icon on the shared warning Alert.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/ChartDisplaySettingsDrawer.tsx |  7 +-
 .../__tests__/DBEditTimeChartForm.test.tsx    | 66 +++++++++++++++++++
 .../hooks/__tests__/useTileSelection.test.tsx | 31 +++++++++
 packages/app/src/hooks/useTileSelection.ts    |  8 ++-
 4 files changed, 110 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
index 5a767c9ce7..3ad5b1859b 100644
--- a/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
+++ b/packages/app/src/components/ChartDisplaySettingsDrawer.tsx
@@ -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';
@@ -402,7 +403,11 @@ export default function ChartDisplaySettingsDrawer({
         setValue={setValue}
         disclaimer={
           isPerSeriesNumberFormatAllowed ? (
-            <Alert variant="outline" color="yellow" p="xs">
+            <Alert
+              variant="warning"
+              p="xs"
+              icon={<IconAlertTriangle size={16} />}
+            >
               <Text size="xs" m={0}>
                 Format may be overridden on individual series.
               </Text>
diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
index b3609941e9..ec6ba7bb49 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';
@@ -732,3 +733,68 @@ describe('DBEditTimeChartForm - Docked settings panel Esc contract', () => {
     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();
+  });
+});
diff --git a/packages/app/src/hooks/__tests__/useTileSelection.test.tsx b/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
index d02159201f..fb377ac524 100644
--- a/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
+++ b/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
@@ -143,3 +143,34 @@ 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 = { name: 'Test', tiles: [] } as unknown as Dashboard;
+    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/useTileSelection.ts b/packages/app/src/hooks/useTileSelection.ts
index 2f729587c7..42bf4eee46 100644
--- a/packages/app/src/hooks/useTileSelection.ts
+++ b/packages/app/src/hooks/useTileSelection.ts
@@ -70,7 +70,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 {

From d4395abd4900089a722e03d35c775b4013503426 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 16:42:35 +0100
Subject: [PATCH 18/19] fix(app): drop unsafe Dashboard cast in
 useTileSelection test to stay under lint warning cap

The main merge pushed the app's eslint warning total to 741, one over the
--max-warnings 740 cap, failing CI lint. Construct a fully-typed Dashboard in
the Escape hotkey test instead of casting through `unknown`, removing the
warning and returning to 740.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/hooks/__tests__/useTileSelection.test.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/hooks/__tests__/useTileSelection.test.tsx b/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
index fb377ac524..0d3ab10311 100644
--- a/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
+++ b/packages/app/src/hooks/__tests__/useTileSelection.test.tsx
@@ -146,7 +146,12 @@ describe('useTileSelection — handleGroupSelected', () => {
 
 describe('useTileSelection — Escape hotkey', () => {
   it('clears the selection on Escape without preventing default', () => {
-    const dashboard = { name: 'Test', tiles: [] } as unknown as Dashboard;
+    const dashboard: Dashboard = {
+      id: 'd1',
+      name: 'Test',
+      tiles: [],
+      tags: [],
+    };
     const { hook } = renderSelectionHook(dashboard);
 
     act(() => {

From 9141c687953625b40f838c97aceaf620f53ab35a Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 28 Jul 2026 16:58:04 +0100
Subject: [PATCH 19/19] fix(dashboards): stop kiosk-mode Esc hotkey from
 swallowing panel/drawer Escape
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The kiosk-mode Escape hotkey was registered as ['Escape', exitKioskMode],
which fired on every Escape (even when not in kiosk mode) and preventDefaulted
by default. Because Mantine's useHotkeys listens on documentElement and bubbles
before window-level Esc handlers, this marked every Escape as handled, so the
tile editor's docked settings panel — which bails on event.defaultPrevented —
could never close, and the drawer's closeOnEscape stayed disabled behind it.
Escape appeared completely dead while a settings panel was open.

Only consume Escape while actually in kiosk mode and never preventDefault, so
Esc falls through to the editor's panel (close panel) and then the drawer
(close drawer) as expected. Adds regression tests for the kiosk hotkey and the
two-step panel/drawer Escape contract.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../__tests__/DBEditTimeChartForm.test.tsx    | 26 ++++++++++++
 .../__tests__/useDashboardKioskMode.test.tsx  | 42 ++++++++++++++++++-
 .../app/src/hooks/useDashboardKioskMode.ts    | 17 +++++++-
 3 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
index ec6ba7bb49..734000ee80 100644
--- a/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
@@ -797,4 +797,30 @@ describe('DBEditTimeChartForm - Docked panel Esc inside a real Drawer', () => {
     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/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/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,