From afcdf57eb6ac9d111b044dc9901fa56fcc0b1655 Mon Sep 17 00:00:00 2001
From: Mr0Bread <55754540+Mr0Bread@users.noreply.github.com>
Date: Fri, 13 Nov 2026 03:23:52 +0200
Subject: [PATCH] fix(database): inset result tabs from the Services pane edges
 (#3013)

The database Results view uses the unpadded compact tab strip, so the selected Output tab touched the Services pane edge. The Results strip now has a --space-2 inline inset of its own; other compact strips are unchanged.

Co-authored-by: Mr0Bread <55754540+Mr0Bread@users.noreply.github.com>
---
 e2e/databaseResultSpacing.spec.ts         | 27 +++++++++++++++++++++++
 src/features/database/Database.module.css |  3 +++
 src/features/database/ResultsView.tsx     |  1 +
 3 files changed, 31 insertions(+)
 create mode 100644 e2e/databaseResultSpacing.spec.ts

diff --git a/e2e/databaseResultSpacing.spec.ts b/e2e/databaseResultSpacing.spec.ts
new file mode 100644
index 000000000..d8771a568
--- /dev/null
+++ b/e2e/databaseResultSpacing.spec.ts
@@ -0,0 +1,27 @@
+import { expect, test } from "./fixtures";
+
+test("selected result tabs are inset from the Services pane edge", async ({ workbench: page }) => {
+  await page.evaluate(async () => {
+    const storePath = "/src/features/database/store.ts";
+    const contributionsPath = "/src/workbench/contributions.ts";
+    const { useDatabase, RESULTS_VIEW } = await import(storePath);
+    const { showServiceView } = await import(contributionsPath);
+    useDatabase.setState({
+      loaded: true,
+      results: [],
+      activeResult: 0,
+      output: [{ id: 1, time: 0, kind: "info", text: "Query completed" }],
+    });
+    showServiceView(RESULTS_VIEW);
+  });
+  const output = page
+    .getByRole("tablist", { name: "Results", exact: true })
+    .getByRole("tab", { name: "Output", exact: true });
+  await expect(output).toHaveAttribute("aria-selected", "true");
+  const inset = await output.evaluate((element) => {
+    const strip = element.closest('[role="tablist"]')?.parentElement;
+    if (!strip) throw new Error("Result tab strip is missing");
+    return element.getBoundingClientRect().left - strip.getBoundingClientRect().left;
+  });
+  expect(inset).toBeGreaterThan(0);
+});
diff --git a/src/features/database/Database.module.css b/src/features/database/Database.module.css
index a5490a9af..fec434743 100644
--- a/src/features/database/Database.module.css
+++ b/src/features/database/Database.module.css
@@ -133,6 +133,9 @@
   flex-direction: column;
   min-height: 0;
 }
+.resultTabs {
+  padding-inline: var(--space-2);
+}
 .toolbar {
   display: flex;
   align-items: center;
diff --git a/src/features/database/ResultsView.tsx b/src/features/database/ResultsView.tsx
index 43f55881a..9aa61e6c5 100644
--- a/src/features/database/ResultsView.tsx
+++ b/src/features/database/ResultsView.tsx
@@ -665,6 +665,7 @@ export function ResultsView() {
   return (
     <div className={styles.view}>
       <Tabs
+        className={styles.resultTabs}
         variant="compact"
         aria-label="Results"
         activeId={tab ? String(tab.id) : String(OUTPUT_TAB)}