diff --git a/e2e/invariants/gallery-mobile.spec.ts b/e2e/invariants/gallery-mobile.spec.ts
new file mode 100644
index 00000000..47a2e9d0
--- /dev/null
+++ b/e2e/invariants/gallery-mobile.spec.ts
@@ -0,0 +1,111 @@
+import { expect, test } from '@playwright/test';
+
+for (const width of [320, 390, 430, 640, 1280]) {
+  for (const mode of ['light', 'dark'] as const) {
+    test(`welcome uses available space at ${width}px in ${mode} mode`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 844 });
+      await page.emulateMedia({ colorScheme: mode, reducedMotion: 'reduce' });
+      await page.goto('/?story=welcome--welcome');
+      const chart = page.locator('.ocw-hero-chart .story-chart');
+      await expect(chart.locator('svg.oc-chart')).toBeVisible();
+      await expect(page.locator('.oc-gallery')).toHaveAttribute('data-oc-mode', mode);
+      await page.evaluate(() => document.fonts.ready);
+
+      const box = await chart.boundingBox();
+      expect(box).not.toBeNull();
+      if (width <= 640) {
+        expect(box!.width).toBeGreaterThanOrEqual(width - 28);
+        const toolbar = await page.locator('.oc-gallery-toolbar').boundingBox();
+        const title = await page.locator('.oc-gallery-title').boundingBox();
+        expect(toolbar!.y + toolbar!.height).toBeLessThanOrEqual(title!.y);
+      }
+      if (box!.width <= 700) {
+        await expect(chart.locator('.oc-legend-entry')).toHaveText([
+          'Amazon', 'Apple', 'Alphabet', 'Microsoft', 'Meta',
+        ]);
+        await expect(chart.locator('.oc-endpoint-label-entry')).toHaveCount(0);
+        const colors = await chart.locator('.oc-legend-swatch-line').evaluateAll(
+          (elements) => elements.map((el) => el.getAttribute('stroke')),
+        );
+        expect(new Set(colors).size).toBe(5);
+        const legend = await chart.locator('.oc-legend').boundingBox();
+        const yAxis = await chart.locator('.oc-axis-y').boundingBox();
+        expect(legend!.y + legend!.height).toBeLessThan(yAxis!.y);
+        if (box!.width < 400) {
+          const annotation = await chart.locator('.oc-annotation-bg').boundingBox();
+          expect(annotation!.y).toBeGreaterThan(legend!.y + legend!.height);
+        }
+      } else {
+        await expect(chart.locator('.oc-endpoint-label-entry')).toHaveCount(5);
+      }
+      const overflow = await page.evaluate(
+        () => document.documentElement.scrollWidth - window.innerWidth,
+      );
+      expect(overflow).toBeLessThanOrEqual(1);
+    });
+  }
+}
+
+for (const demo of [
+  { story: 'charts--line-and-area', id: 'five-series-legend' },
+  { story: 'showcase--showcase', id: 'multi-series-line' },
+]) {
+  test(`${demo.story} keeps every revenue series identifiable on phones`, async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto(`/?story=${demo.story}#${demo.id}`);
+    const card = page.locator(`#${demo.id}`);
+    await card.scrollIntoViewIfNeeded();
+    await expect(card.locator('.oc-legend-entry')).toHaveCount(5);
+    await expect(card.locator('.oc-endpoint-label-entry')).toHaveCount(0);
+    const box = await card.locator('.story-chart').boundingBox();
+    expect(box!.width).toBeGreaterThanOrEqual(362);
+  });
+}
+
+for (const mode of ['light', 'dark'] as const) {
+  test(`phone width preset keeps the gallery toolbar clear in ${mode} mode`, async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 900 });
+    await page.emulateMedia({ colorScheme: mode, reducedMotion: 'reduce' });
+    await page.goto('/?story=welcome--welcome&width=390');
+    const frame = page.frameLocator('iframe');
+    const chart = frame.locator('.ocw-hero-chart .story-chart');
+    await expect(chart.locator('.oc-legend-entry')).toHaveCount(5);
+    const box = await chart.boundingBox();
+    expect(box!.width).toBeGreaterThanOrEqual(362);
+    const toolbar = frame.locator('.oc-gallery-toolbar');
+    await expect(toolbar).toHaveAttribute('data-oc-mode', mode);
+    await expect(toolbar).toHaveCSS('background-color', mode === 'dark' ? 'rgb(15, 16, 17)' : 'rgb(250, 250, 250)');
+    const toolbarBox = await toolbar.boundingBox();
+    const titleBox = await frame.locator('.oc-gallery-title').boundingBox();
+    expect(toolbarBox!.y + toolbarBox!.height).toBeLessThanOrEqual(titleBox!.y);
+
+    const trigger = frame.getByRole('button', { name: 'Theme Default', exact: true });
+    await trigger.click();
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    const option = frame.getByRole('button', { name: 'Midnight', exact: true });
+    expect((await option.boundingBox())!.height).toBeGreaterThanOrEqual(44);
+    await frame.locator('.oc-gallery-title').click({ position: { x: 300, y: 10 } });
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await trigger.click();
+    await option.focus();
+    await page.keyboard.press('Escape');
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await expect(trigger).toBeFocused();
+  });
+}
+
+test('theme controls fit a narrow phone and remain accessible in a short viewport', async ({ page }) => {
+  await page.setViewportSize({ width: 320, height: 360 });
+  await page.goto('/?story=welcome--welcome');
+  await page.getByRole('button', { name: 'Theme Default', exact: true }).click();
+  await page.getByRole('button', { name: 'Midnight', exact: true }).click();
+  const trigger = page.getByRole('button', { name: 'Theme Midnight', exact: true });
+  const triggerBox = await trigger.boundingBox();
+  const githubBox = await page.locator('.oc-github-link').boundingBox();
+  expect(triggerBox!.x + triggerBox!.width).toBeLessThan(githubBox!.x);
+  await trigger.click();
+  await page.getByRole('button', { name: 'Signal', exact: true }).scrollIntoViewIfNeeded();
+  const optionsBox = await page.locator('.oc-theme-options').boundingBox();
+  expect(optionsBox!.x + optionsBox!.width).toBeLessThanOrEqual(320);
+  expect(optionsBox!.y + optionsBox!.height).toBeLessThanOrEqual(360);
+});
diff --git a/examples/.ladle/components.tsx b/examples/.ladle/components.tsx
index bcd1b43a..096367fc 100644
--- a/examples/.ladle/components.tsx
+++ b/examples/.ladle/components.tsx
@@ -15,7 +15,7 @@
  *    capture.ts hides them (C1).
  * 5. Shell chrome styling via `.ladle/shell.css` (imported here).
  */
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import '@opendata-ai/openchart-core/styles.css';
 import '../src/stories.css';
 import './shell.css';
@@ -236,14 +236,26 @@ function ThemePicker({
 }) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  const popupId = useId();
 
   useEffect(() => {
     if (!open) return;
     const handler = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
     };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
+    const ownerDocument = ref.current?.ownerDocument ?? document;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        ref.current?.querySelector('button')?.focus();
+      }
+    };
+    ownerDocument.addEventListener('mousedown', handler);
+    ownerDocument.addEventListener('keydown', onKeyDown);
+    return () => {
+      ownerDocument.removeEventListener('mousedown', handler);
+      ownerDocument.removeEventListener('keydown', onKeyDown);
+    };
   }, [open]);
 
   const p = PALETTE[mode];
@@ -262,6 +274,8 @@ function ThemePicker({
     >
       <button
         type="button"
+        aria-expanded={open}
+        aria-controls={popupId}
         onClick={() => setOpen(!open)}
         style={{
           display: 'flex',
@@ -318,6 +332,8 @@ function ThemePicker({
 
       {open ? (
         <div
+          id={popupId}
+          className="oc-theme-options"
           style={{
             position: 'absolute',
             top: 'calc(100% + 4px)',
@@ -445,11 +461,13 @@ export const Provider: GlobalProvider = ({ children, globalState }) => {
   return (
     <OcModeContext.Provider value={modeCtx}>
       <VizThemeProvider theme={theme} darkMode={darkMode}>
-        <ThemePicker selected={selected} onChange={setSelected} mode={mode} />
+        <div className="oc-gallery-toolbar" data-oc-mode={mode}>
+          <ThemePicker selected={selected} onChange={setSelected} mode={mode} />
+          <GitHubLink mode={mode} />
+        </div>
         <div className="ladle-story-root" style={{ background: bg, color: fg }}>
           {children}
         </div>
-        <GitHubLink mode={mode} />
       </VizThemeProvider>
     </OcModeContext.Provider>
   );
diff --git a/examples/.ladle/shell.css b/examples/.ladle/shell.css
index 559d7dc9..f06d2a9b 100644
--- a/examples/.ladle/shell.css
+++ b/examples/.ladle/shell.css
@@ -113,6 +113,44 @@ body {
     /* biome-ignore lint/complexity/noImportantStyles: must beat the component's inline right: 280px */
     right: 12px !important;
   }
+
+  /* Gallery pages own their gutters. Keep fixture story padding unchanged. */
+  .ladle-main:has(.oc-gallery) {
+    padding: 0;
+  }
+
+  .oc-gallery-toolbar:has(+ .ladle-story-root .oc-gallery) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--gx-surface);
+    border-bottom: 1px solid var(--gx-border);
+  }
+
+  .oc-gallery-toolbar:has(+ .ladle-story-root .oc-gallery) > * {
+    /* biome-ignore lint/complexity/noImportantStyles: mobile layout replaces inline fixed positioning */
+    position: relative !important;
+    /* biome-ignore lint/complexity/noImportantStyles: reset inline desktop offsets */
+    inset: auto !important;
+  }
+
+  .oc-gallery-toolbar:has(+ .ladle-story-root .oc-gallery) .ladle-theme-picker button,
+  .oc-gallery-toolbar:has(+ .ladle-story-root .oc-gallery) .oc-github-link {
+    min-height: 44px;
+  }
+
+  .oc-gallery-toolbar:has(+ .ladle-story-root .oc-gallery) .ladle-theme-picker > button {
+    max-width: calc(100vw - 124px);
+  }
+
+  .oc-gallery-toolbar:has(+ .ladle-story-root .oc-gallery) .oc-theme-options {
+    max-width: calc(100vw - 24px);
+    max-height: calc(100dvh - 76px);
+    /* biome-ignore lint/complexity/noImportantStyles: override the dropdown's inline overflow */
+    overflow-y: auto !important;
+  }
 }
 
 /* ---------------------------------------------------------------------------
diff --git a/examples/src/__tests__/v9-editorial-examples.test.ts b/examples/src/__tests__/v9-editorial-examples.test.ts
index 7f5bd2bd..8d4804f1 100644
--- a/examples/src/__tests__/v9-editorial-examples.test.ts
+++ b/examples/src/__tests__/v9-editorial-examples.test.ts
@@ -52,14 +52,15 @@ describe('v9 authored editorial choices', () => {
 
   it.each(
     amazonExamples,
-  )('%s explicitly focuses Amazon and labels every comparison series', (file, name) => {
+  )('%s focuses Amazon and identifies every comparison series at each width', (file, name) => {
     const spec = specFor(file, name);
     expect(spec.encoding.color).toMatchObject({
       field: 'company',
       scale: { domain: ['Amazon', 'Apple', 'Alphabet', 'Microsoft', 'Meta'] },
     });
     expect(spec.seriesStyles).toMatchObject({ Amazon: { strokeWidth: 3 } });
-    for (const width of [390, 1280]) {
+    const series = ['Alphabet', 'Amazon', 'Apple', 'Meta', 'Microsoft'];
+    for (const width of [320, 390, 700, 701, 1280]) {
       const layout = compileChart(spec, { width, height: 460, onWarn: () => {} });
       const lines = layout.marks.filter((mark): mark is LineMark => mark.type === 'line');
       const amazon = lines.find((line) => line.seriesKey === 'Amazon')!;
@@ -69,13 +70,23 @@ describe('v9 authored editorial choices', () => {
           .filter((line) => line.seriesKey !== 'Amazon')
           .every((line) => line.stroke !== amazon.stroke && line.strokeWidth < amazon.strokeWidth),
       ).toBe(true);
-      expect(layout.endpointLabels?.entries.map((entry) => entry.seriesKey).sort()).toEqual([
-        'Alphabet',
-        'Amazon',
-        'Apple',
-        'Meta',
-        'Microsoft',
-      ]);
+      if (!('entries' in layout.legend)) throw new Error('Expected a categorical revenue legend');
+      if (width <= 700) {
+        expect(layout.endpointLabels).toBeUndefined();
+        expect(layout.legend.position).toBe('top');
+        expect(layout.legend.entries.map((entry) => entry.label).sort()).toEqual(series);
+        expect(layout.legend.bounds.y + layout.legend.bounds.height).toBeLessThanOrEqual(
+          layout.area.y,
+        );
+        for (const entry of layout.legend.entries) {
+          expect(entry.color).toBe(lines.find((line) => line.seriesKey === entry.label)?.stroke);
+        }
+      } else {
+        expect(layout.endpointLabels?.entries.map((entry) => entry.seriesKey).sort()).toEqual(
+          series,
+        );
+        expect(layout.legend.entries).toHaveLength(0);
+      }
     }
   });
 
diff --git a/examples/src/components/gallery.css b/examples/src/components/gallery.css
index a4485bc6..66bb677f 100644
--- a/examples/src/components/gallery.css
+++ b/examples/src/components/gallery.css
@@ -95,6 +95,12 @@
   container-name: gallery-root;
 }
 
+@media (max-width: 640px) {
+  .oc-gallery {
+    padding: var(--gx-space-5) var(--gx-space-3) var(--gx-space-8);
+  }
+}
+
 .oc-gallery *,
 .oc-gallery *::before,
 .oc-gallery *::after {
@@ -538,6 +544,67 @@
   border-radius: var(--gx-radius-control);
 }
 
+/* Narrow content columns, including Ladle's phone-width iframe. */
+@container gallery-root (max-width: 640px) {
+  .oc-gallery-title {
+    font-size: 1.75rem;
+  }
+
+  .oc-gallery-lede {
+    font-size: var(--gx-type-body);
+  }
+
+  .oc-gallery-header {
+    margin-bottom: var(--gx-space-5);
+  }
+
+  .oc-section {
+    margin-top: var(--gx-space-8);
+  }
+
+  .oc-section:first-of-type {
+    margin-top: var(--gx-space-5);
+  }
+
+  .oc-section-body {
+    margin-top: var(--gx-space-4);
+    gap: var(--gx-space-4);
+  }
+
+  .oc-demo-header {
+    padding: var(--gx-space-4) var(--gx-space-3) var(--gx-space-2);
+  }
+
+  .oc-demo-viz,
+  .oc-demo--headless .oc-demo-viz {
+    padding: var(--gx-space-2) 0 var(--gx-space-3);
+  }
+
+  .oc-spec-summary {
+    padding: var(--gx-space-1) var(--gx-space-3);
+  }
+
+  .oc-spec-toggle,
+  .oc-spec-copy,
+  .oc-anchor-btn {
+    min-height: 44px;
+  }
+
+  .oc-anchor-btn {
+    opacity: 1;
+    min-width: 32px;
+  }
+
+  .oc-spec-code {
+    padding: var(--gx-space-3);
+  }
+
+  .story-grid-2 {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--gx-space-4);
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Motion preference
  * ------------------------------------------------------------------------- */
diff --git a/examples/src/gallery/charts-line-area.stories.tsx b/examples/src/gallery/charts-line-area.stories.tsx
index 4c0f10df..21e6f177 100644
--- a/examples/src/gallery/charts-line-area.stories.tsx
+++ b/examples/src/gallery/charts-line-area.stories.tsx
@@ -19,6 +19,7 @@ import {
   monthlyTemperature,
   usInflation,
 } from '../data';
+import { narrowRevenueLegend } from './helpers';
 
 const ACCENT = '#0e7490';
 
@@ -182,6 +183,7 @@ const fiveSeriesSpec: ChartSpec = {
   // Explicit focus mutes comparison strokes; direct labels keep every company identifiable.
   legend: { show: false },
   endpointLabels: { content: 'label', showMarker: true },
+  overrides: { compact: narrowRevenueLegend, medium: narrowRevenueLegend },
   seriesStyles: { Amazon: { strokeWidth: 3 } },
   labels: { density: 'none' },
   chrome: {
diff --git a/examples/src/gallery/helpers.ts b/examples/src/gallery/helpers.ts
index 351edac3..f1da08e3 100644
--- a/examples/src/gallery/helpers.ts
+++ b/examples/src/gallery/helpers.ts
@@ -2,7 +2,18 @@
  * Small spec helpers shared across gallery pages.
  */
 
-import type { GradientDef } from '@opendata-ai/openchart-core';
+import type { ChartSpecOverride, GradientDef } from '@opendata-ai/openchart-core';
+
+/** Replace the Big Tech endpoint column with a full-width plot and a keyed legend on phones. */
+export const narrowRevenueLegend: ChartSpecOverride = {
+  endpointLabels: false,
+  legend: { show: true, position: 'top', maxRows: 3 },
+  encoding: {
+    color: {
+      scale: { range: ['#0e7490', '#c2410c', '#7c3aed', '#15803d', '#be185d'] },
+    },
+  },
+};
 
 /** Horizontal-bar fill: a left-to-right linear gradient fading in from the base. */
 export const hBarGradient = (color: string): GradientDef => ({
diff --git a/examples/src/gallery/showcase.stories.tsx b/examples/src/gallery/showcase.stories.tsx
index d93710ea..eb876d86 100644
--- a/examples/src/gallery/showcase.stories.tsx
+++ b/examples/src/gallery/showcase.stories.tsx
@@ -34,7 +34,7 @@ import {
   worldGdp,
 } from '../data';
 import { StatCard, useDashRootClass } from './dashboards.layouts';
-import { hBarGradient } from './helpers';
+import { hBarGradient, narrowRevenueLegend } from './helpers';
 
 const ACCENT = '#0e7490';
 
@@ -64,6 +64,7 @@ const multiLineSpec: ChartSpec = {
   },
   legend: { show: false },
   endpointLabels: { content: 'label', showMarker: true },
+  overrides: { compact: narrowRevenueLegend, medium: narrowRevenueLegend },
   seriesStyles: { Amazon: { strokeWidth: 3 } },
   annotations: [
     {
diff --git a/examples/src/gallery/welcome.stories.tsx b/examples/src/gallery/welcome.stories.tsx
index fd186270..fe5c57d1 100644
--- a/examples/src/gallery/welcome.stories.tsx
+++ b/examples/src/gallery/welcome.stories.tsx
@@ -21,6 +21,7 @@ import type {
 import { BarList, Chart, DataTable, Graph, Sankey } from '@opendata-ai/openchart-react';
 import { Demo, GalleryPage } from '../components';
 import { bigTechRevenue, programmingLanguages, stockPerformance } from '../data';
+import { narrowRevenueLegend } from './helpers';
 import { GALLERY, type PageEntry } from './registry';
 
 // ---------------------------------------------------------------------------
@@ -157,14 +158,14 @@ const WELCOME_CSS = `
 [data-oc-mode='dark'] .ocw-agents-good {
   color: #4ade80;
 }
-@media (max-width: 720px) {
+@container gallery-root (max-width: 720px) {
   .ocw-agents {
     grid-template-columns: minmax(0, 1fr);
   }
 }
 .ocw-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
   gap: var(--gx-space-4);
 }
 .ocw-card {
@@ -343,6 +344,24 @@ const WELCOME_CSS = `
   color: var(--gx-text-muted);
   margin: 0;
 }
+@container gallery-root (max-width: 640px) {
+  .ocw-hero,
+  .ocw-block {
+    margin-bottom: var(--gx-space-6);
+  }
+  .ocw-hero-chart {
+    margin-top: var(--gx-space-4);
+    padding: var(--gx-space-2) 0;
+  }
+  .ocw-agents {
+    padding: var(--gx-space-4);
+    gap: var(--gx-space-4);
+  }
+  .ocw-install-cmd,
+  .ocw-install-note {
+    overflow-wrap: anywhere;
+  }
+}
 `;
 
 function WelcomeStyles() {
@@ -378,6 +397,24 @@ const heroSpec: ChartSpec = {
   },
   legend: { show: false },
   endpointLabels: { content: 'label', showMarker: true },
+  overrides: {
+    compact: {
+      ...narrowRevenueLegend,
+      annotations: [
+        {
+          type: 'text',
+          x: '2024-01-01',
+          y: 638,
+          text: 'Amazon crosses\n$600B in 2024',
+          anchor: 'left',
+          offset: { dx: -12, dy: 32 },
+          connector: true,
+          background: true,
+        },
+      ],
+    },
+    medium: narrowRevenueLegend,
+  },
   seriesStyles: { Amazon: { strokeWidth: 3 } },
   labels: { density: 'none' },
   annotations: [
diff --git a/packages/core/schema/chart.schema.json b/packages/core/schema/chart.schema.json
index bda54a18..d4c37c13 100644
--- a/packages/core/schema/chart.schema.json
+++ b/packages/core/schema/chart.schema.json
@@ -4897,6 +4897,369 @@
     "ChartSpecOverride": {
       "type": "object",
       "properties": {
+        "encoding": {
+          "type": "object",
+          "properties": {
+            "x": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            },
+            "y": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            },
+            "color": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            },
+            "size": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            }
+          },
+          "additionalProperties": false,
+          "description": "Patch axis and scale settings on existing scale-bearing channels; nested properties merge with the base."
+        },
         "chrome": {
           "$ref": "#/definitions/Chrome",
           "description": "Override editorial chrome at this breakpoint."
diff --git a/packages/core/schema/vizspec.schema.json b/packages/core/schema/vizspec.schema.json
index 886168ba..74c80e78 100644
--- a/packages/core/schema/vizspec.schema.json
+++ b/packages/core/schema/vizspec.schema.json
@@ -4926,6 +4926,369 @@
     "ChartSpecOverride": {
       "type": "object",
       "properties": {
+        "encoding": {
+          "type": "object",
+          "properties": {
+            "x": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            },
+            "y": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            },
+            "color": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            },
+            "size": {
+              "type": "object",
+              "properties": {
+                "axis": {
+                  "anyOf": [
+                    {
+                      "$ref": "#/definitions/AxisConfig"
+                    },
+                    {
+                      "type": "boolean",
+                      "const": false
+                    }
+                  ]
+                },
+                "scale": {
+                  "type": "object",
+                  "properties": {
+                    "domain": {
+                      "anyOf": [
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "number"
+                          }
+                        },
+                        {
+                          "type": "array",
+                          "items": {
+                            "type": "string"
+                          }
+                        }
+                      ],
+                      "description": "Explicit domain override. Auto-derived from data if omitted. Continuous scales take `[min, max]`; threshold scales take the full list of class break values; categorical scales take the value list."
+                    },
+                    "type": {
+                      "$ref": "#/definitions/ScaleType",
+                      "description": "Scale type override. Usually inferred from field type."
+                    },
+                    "nice": {
+                      "type": "boolean",
+                      "description": "Whether to nice-ify the domain for clean tick values. Defaults to true."
+                    },
+                    "zero": {
+                      "type": "boolean",
+                      "description": "Whether the domain should include zero. Defaults to true for quantitative."
+                    },
+                    "clip": {
+                      "type": "boolean",
+                      "description": "When true and domain is set, filter out data rows with values outside the domain range."
+                    },
+                    "range": {
+                      "type": "array",
+                      "items": {},
+                      "description": "Explicit range override."
+                    },
+                    "clamp": {
+                      "type": "boolean",
+                      "description": "Clamp output to the range."
+                    },
+                    "padding": {
+                      "type": "number",
+                      "description": "Padding for band/point scales. Point-scale default (a categorical x/y on a line/area/point mark) is 0 for line and area marks (the trend runs flush to the plot edges) and 0.5 for other marks (e.g. scatter, so points don't collide with the axis). `paddingOuter` is accepted as an alias here since point scales have no inner bands."
+                    },
+                    "paddingInner": {
+                      "type": "number",
+                      "description": "Inner padding for band scales."
+                    },
+                    "paddingOuter": {
+                      "type": "number",
+                      "description": "Outer padding for band scales."
+                    },
+                    "exponent": {
+                      "type": "number",
+                      "description": "Exponent for pow scales."
+                    },
+                    "base": {
+                      "type": "number",
+                      "description": "Base for log scales (default 10)."
+                    },
+                    "constant": {
+                      "type": "number",
+                      "description": "Constant for symlog scales."
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
+            }
+          },
+          "additionalProperties": false,
+          "description": "Patch axis and scale settings on existing scale-bearing channels; nested properties merge with the base."
+        },
         "chrome": {
           "$ref": "#/definitions/Chrome",
           "description": "Override editorial chrome at this breakpoint."
diff --git a/packages/core/src/schema/__tests__/schema.test.ts b/packages/core/src/schema/__tests__/schema.test.ts
index 11301e9c..04aef7fc 100644
--- a/packages/core/src/schema/__tests__/schema.test.ts
+++ b/packages/core/src/schema/__tests__/schema.test.ts
@@ -132,6 +132,64 @@ describe('chart.schema.json', () => {
     };
     expect(validateChart(spec), JSON.stringify(validateChart.errors)).toBe(true);
   });
+
+  it('accepts partial encoding overrides for compact legends', () => {
+    const spec = {
+      ...minimalSpecForMark('line'),
+      overrides: {
+        compact: {
+          endpointLabels: false,
+          legend: { show: true, position: 'top', maxRows: 3 },
+          encoding: {
+            x: { axis: { tickCount: 3 } },
+            color: { scale: { range: ['#0e7490', '#c2410c'] } },
+          },
+        },
+      },
+    };
+    for (const validate of [validateChart, validateViz]) {
+      expect(validate(spec), JSON.stringify(validate.errors)).toBe(true);
+    }
+  });
+
+  it.each([
+    { name: 'constant color', encoding: { color: { value: '#0e7490' } } },
+    {
+      name: 'conditional color',
+      encoding: { color: { condition: { test: 'datum.amount > 10', value: '#0e7490' } } },
+    },
+    { name: 'binning', encoding: { x: { bin: true } } },
+    { name: 'time units', encoding: { x: { timeUnit: 'year' } } },
+    { name: 'named color schemes', encoding: { color: { scale: { scheme: 'blues' } } } },
+    { name: 'reversed color scales', encoding: { color: { scale: { reverse: true } } } },
+    { name: 'null axis shorthand', encoding: { x: { axis: null } } },
+    ...[
+      'tooltip',
+      'facet',
+      'row',
+      'column',
+      'detail',
+      'key',
+      'text',
+      'theta',
+      'x2',
+      'y2',
+      'opacity',
+      'angle',
+      'strokeDash',
+    ].map((channel) => ({
+      name: `${channel} channel`,
+      encoding: { [channel]: { scale: { range: [0, 1] } } },
+    })),
+  ])('rejects unsupported $name in breakpoint encoding overrides', ({ encoding }) => {
+    const spec = {
+      ...minimalSpecForMark('line'),
+      overrides: { compact: { encoding } },
+    };
+    for (const validate of [validateChart, validateViz]) {
+      expect(validate(spec)).toBe(false);
+    }
+  });
 });
 
 describe('vizspec.schema.json', () => {
diff --git a/packages/core/src/types/spec.ts b/packages/core/src/types/spec.ts
index 9d8aaae3..7633b24e 100644
--- a/packages/core/src/types/spec.ts
+++ b/packages/core/src/types/spec.ts
@@ -1812,6 +1812,13 @@ export type Display = 'full' | 'sparkline';
  * when the container matches the breakpoint.
  */
 export interface ChartSpecOverride {
+  /** Patch axis and scale settings on existing scale-bearing channels; nested properties merge with the base. */
+  encoding?: {
+    [K in 'x' | 'y' | 'color' | 'size']?: {
+      axis?: AxisConfig | false;
+      scale?: Omit<ScaleConfig, 'scheme' | 'reverse'>;
+    };
+  };
   /** Override editorial chrome at this breakpoint. */
   chrome?: Chrome;
   /** Override label configuration at this breakpoint. */
diff --git a/packages/engine/src/__tests__/compile-chart.test.ts b/packages/engine/src/__tests__/compile-chart.test.ts
index 117297a7..cccf0f20 100644
--- a/packages/engine/src/__tests__/compile-chart.test.ts
+++ b/packages/engine/src/__tests__/compile-chart.test.ts
@@ -1,4 +1,4 @@
-import { contrastRatio } from '@opendata-ai/openchart-core';
+import { type ChartSpec, contrastRatio, type LineMark } from '@opendata-ai/openchart-core';
 import { describe, expect, it } from 'vitest';
 import { compileChart, compileGraph, compileTable } from '../compile';
 
@@ -1245,6 +1245,74 @@ describe('compileChart', () => {
     // Tick count flows from base spec — if shallow-merged, tickCount would be lost.
     expect(layout.axes.x?.ticks.length).toBeGreaterThan(0);
   });
+
+  it('breakpoint axis and color range patches preserve base fields and scale domain', () => {
+    const spec: ChartSpec = {
+      ...lineSpec,
+      encoding: {
+        ...lineSpec.encoding,
+        x: { ...lineSpec.encoding.x, axis: { title: 'Year', format: '%Y' } },
+        color: { ...lineSpec.encoding.color, scale: { domain: ['UK', 'US'] } },
+      },
+      overrides: {
+        compact: {
+          encoding: {
+            x: { axis: { tickCount: 2 } },
+            color: { scale: { range: ['#0e7490', '#c2410c'] } },
+          },
+        },
+      },
+    };
+    const layout = compileChart(spec, { width: 320, height: 240 });
+    expect(layout.axes.x?.label).toBe('Year');
+    expect(layout.axes.x?.ticks.map((tick) => tick.label)).toEqual(['2020', '2021']);
+    const lines = layout.marks.filter((mark): mark is LineMark => mark.type === 'line');
+    expect(lines).toHaveLength(2);
+    expect(lines.find((line) => line.seriesKey === 'UK')?.stroke).toBe('#0e7490');
+    expect(lines.find((line) => line.seriesKey === 'US')?.stroke).toBe('#c2410c');
+  });
+
+  it('ignores a breakpoint color patch when the base chart has no color channel', () => {
+    const spec: ChartSpec = {
+      ...lineSpec,
+      encoding: { x: lineSpec.encoding.x, y: lineSpec.encoding.y },
+    };
+    const options = { width: 320, height: 240 };
+    const layout = compileChart(
+      {
+        ...spec,
+        overrides: { compact: { encoding: { color: { scale: { range: ['#0e7490'] } } } } },
+      },
+      options,
+    );
+    expect(layout).toEqual(compileChart(spec, options));
+  });
+
+  it('preserves explicit tooltip arrays when unchecked overrides attempt to patch them', () => {
+    const spec = {
+      ...barSpec,
+      encoding: {
+        ...barSpec.encoding,
+        tooltip: [
+          { field: 'name', type: 'nominal' as const },
+          { field: 'value', type: 'quantitative' as const, title: 'Amount' },
+        ],
+      },
+    };
+    const options = { width: 320, height: 240 };
+    const layout = compileChart(
+      {
+        ...spec,
+        overrides: { compact: { encoding: { tooltip: { axis: { title: 'Ignored' } } } } },
+      },
+      options,
+    );
+    expect(layout.tooltipDescriptors).toEqual(compileChart(spec, options).tooltipDescriptors);
+    expect(layout.tooltipDescriptors.get('rect-0')?.fields.map((field) => field.label)).toEqual([
+      'name',
+      'Amount',
+    ]);
+  });
 });
 
 describe('compileTable', () => {
diff --git a/packages/engine/src/compile/breakpoint-overrides.ts b/packages/engine/src/compile/breakpoint-overrides.ts
index fd414a98..d8afc39d 100644
--- a/packages/engine/src/compile/breakpoint-overrides.ts
+++ b/packages/engine/src/compile/breakpoint-overrides.ts
@@ -173,26 +173,32 @@ function mergeEncoding(
   for (const channel of Object.keys(bpEnc)) {
     const baseCh = mergedEncoding[channel];
     const bpCh = bpEnc[channel];
-    if (bpCh && baseCh) {
-      const merged: Record<string, unknown> = { ...baseCh, ...bpCh };
-      for (const key of NESTED_CHANNEL_KEYS) {
-        const baseNested = baseCh[key];
-        const bpNested = bpCh[key];
-        if (
-          baseNested &&
-          bpNested &&
-          typeof baseNested === 'object' &&
-          typeof bpNested === 'object' &&
-          !Array.isArray(baseNested) &&
-          !Array.isArray(bpNested)
-        ) {
-          merged[key] = { ...baseNested, ...bpNested };
-        }
+    if (
+      !baseCh ||
+      typeof baseCh !== 'object' ||
+      Array.isArray(baseCh) ||
+      !bpCh ||
+      typeof bpCh !== 'object' ||
+      Array.isArray(bpCh)
+    ) {
+      continue;
+    }
+    const merged: Record<string, unknown> = { ...baseCh, ...bpCh };
+    for (const key of NESTED_CHANNEL_KEYS) {
+      const baseNested = baseCh[key];
+      const bpNested = bpCh[key];
+      if (
+        baseNested &&
+        bpNested &&
+        typeof baseNested === 'object' &&
+        typeof bpNested === 'object' &&
+        !Array.isArray(baseNested) &&
+        !Array.isArray(bpNested)
+      ) {
+        merged[key] = { ...baseNested, ...bpNested };
       }
-      mergedEncoding[channel] = merged;
-    } else if (bpCh) {
-      mergedEncoding[channel] = bpCh;
     }
+    mergedEncoding[channel] = merged;
   }
   return mergedEncoding as unknown as NormalizedChartSpec['encoding'];
 }