diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 0487a0805..b717791b6 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -11510,14 +11510,17 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
   }
 }
 
-.data-grid-header-shell,
+.data-grid-header-shell {
+  /* Keep unused horizontal space continuous with the result background;
+     only real column headers should use the header fill. */
+  background-color: var(--background);
+}
+
 .data-grid-header-cell {
   background-color: rgb(239, 239, 239);
 }
 
-[data-grid-root].data-grid--dark .data-grid-header-shell,
 [data-grid-root].data-grid--dark .data-grid-header-cell,
-:global(.dark) [data-grid-root] .data-grid-header-shell,
 :global(.dark) [data-grid-root] .data-grid-header-cell {
   background-color: rgb(32, 32, 34) !important;
 }
diff --git a/packages/app-tests/dataGridHeaderBackground.test.ts b/packages/app-tests/dataGridHeaderBackground.test.ts
new file mode 100644
index 000000000..2ab8b8e55
--- /dev/null
+++ b/packages/app-tests/dataGridHeaderBackground.test.ts
@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "vitest";
+import { parse } from "vue/compiler-sfc";
+
+test("unused header width keeps the result background", () => {
+  const source = readFileSync("apps/desktop/src/components/grid/DataGrid.vue", "utf8");
+  const { descriptor } = parse(source, { filename: "DataGrid.vue" });
+  const style = descriptor.styles.map((block) => block.content).join("\n");
+
+  assert.match(style, /\.data-grid-header-shell\s*\{[^}]*background-color:\s*var\(--background\)/s);
+  assert.match(style, /\.data-grid-header-cell\s*\{[^}]*background-color:\s*rgb\(239, 239, 239\)/s);
+  assert.doesNotMatch(style, /\.data-grid-header-shell\s*,\s*\.data-grid-header-cell/);
+  assert.doesNotMatch(style, /data-grid--dark\s+\.data-grid-header-shell/);
+});